JS函数原型链上的call() 方法与apply()方法
call()
方法
-
语法结构
- fun.call(thisArg, arg1, arg2, ...)
- 在fun函数运行时指定的this值,既代替Function类里this对象
- 返回值是调用方法的返回值,若该方法没有返回值,则返回undefined
- 可以通过call()来实现继承,写一个方法然后让另一个对象继承它,而不是在新对象中重新写一下这个方法
- call()方法存在于在Function.prototype上,因此每个函数都可以通过原型链继承下来。
-
作用
- 1、使用call() 方法继承函数的属性和方法
- 2、使用call() 方法调用匿名函数
- 3、使用call() 方法调用函数并且指定上下文的this
// 1. 使用 call() 继承方法和属性
function Person() {
this.name = 'person';
this.age = 24;
this.print = function(){
console.log('hello call!');
}
}
function Son(){
// 使 son 继承 Person 的方法和属性
Person.call(this);
this.study = 'study';
this.play = function(){
console.log('son play!');
}
}
var son = new Son();
console.log(son);
console.log(son.age); // 24
son.print(); //hello call!
// 2. 使用call() 方法调用匿名函数
function Person() {
this.name = 'person';
this.age = 24;
this.print = function(){
console.log('hello call!');
}
}
(function(){
this.print();
}).call(new Person());
// 3. 使用call() 方法调用函数并且指定上下文的this
function print() {
var message = [this.person, 'is an awesome', this.role].join(' ');
console.log(message);
}
var desc = {
person:'Douglas Crockford',
role:'Javascript Developer'
}
print.call(desc);
- 面试题
- 使用getName方法打印出1,2,3
var name = "1";
var obj = {
name:2,
prop: {
name:3,
getName: function() {
return this.name;
}
}
}
console.info(obj.prop.getName.call(this)); //1
console.info(obj.prop.getName.call(obj)); //2
console.info(obj.prop.getName()); //3
apply()
方法
-
语法结构
- fun.call(thisArg, args)
- 在fun函数运行时指定的this值,既代替Function类里this对象
- args是数组,它将作为参数传给Function(args-->arguments)
- 返回值是调用方法的返回值,若该方法没有返回值,则返回undefined
- 可以通过apply()来实现继承,写一个方法然后让另一个对象继承它,而不是在新对象中重新写一下这个方法
- apply()方法存在于在Function.prototype上,因此每个函数都可以通过原型链继承下来。
-
作用
- 1、使用apply() 方法继承函数的属性和方法
- 2、使用apply() 方法调用匿名函数
- 3、使用apply() 方法调用函数并且指定上下文的this
- 4、使用apply() 方法可以将数组列表转换为参数列表
// 使用apply() 方法继承函数的属性和方法
function Person(name,age) {
this.name=name;
this.age=age;
}
function Student(name,age,grade) {
Person.apply(this,arguments);
this.grade=grade;
}
var student=new Student("张三",21,"一年级");
console.log(student);
// 使用apply() 方法调用匿名函数
function Person() {
this.name = 'person';
this.age = 24;
this.print = function(){
console.log('hello call!');
}
}
(function(){
this.print();
}).apply(new Person());
// 使用apply() 方法调用函数并且指定上下文的this
function print() {
var message = [this.person, 'is an awesome', this.role].join(' ');
console.log(message);
}
var desc = {
person:'Douglas Crockford',
role:'Javascript Developer'
}
print.apply(desc);
// 使用apply() 方法可以将数组列表转换为参数列表
var arr = [2,6,3,6,4];
console.log(Math.max.apply(null,arr));
console.log(Math.min.apply(null,arr));
var arr1=new Array("1","2","3");
var arr2=new Array("4","5","6");
Array.prototype.push.apply(arr1,arr2);