继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

大白话javascript call()和apply()

夏目祐太
关注TA
已关注
手记 26
粉丝 27
获赞 539
1.方法定义

call方法:
语法:Function.call([thisObj[,arg1[, arg2[, [,.argN]]]]])
定义:调用一个对象的一个方法,以另一个对象替换当前对象。
说明:
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj
指定的新对象。
如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

apply方法:
语法:Function.apply([thisObj[,argArray]])
定义:应用某一对象的一个方法,用另一个对象替换当前对象。
说明:
如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj,
并且无法被传递任何参数。

call方法跟apply方法并没有明显区别,只是传递参数的形式不一样
call():一个一个的传递参数;
apply():以数组的形式传递。

2.常见用法

2.1. 调用函数
2.2. 将类数组对象转换成数组对象
2.3. 借用别人的方法
2.4. 绑定this指向
2.5. 继承
2.6.实现ES6 扩展运算符功能

2.1 调用函数

function foo() {
    console.log(this === window);
}

foo();  // true
foo.call(); //  true
foo.apply();    // true
// 在非严格模式下当我们第一个参数传递为null或undefined时,函数体内的this会指向默认的宿主对象,在浏览器中则是window
foo.call(null); // true
foo.call(undefined);    // true

2.2 将类数组对象转换成数组对象

function person(name, age, high) {
    console.log(arguments);    //  { '0': 'xiaoming', '1': 12, '2': '1.6m' }

    var arr = [].slice.apply(arguments);
    console.log(arr);    // ["xiaoming", 12, "1.6m"]
}

person("xiaoming", 12, "1.6m");

2.3 借用别人方法

// 借用Math对象的max方法寻找数组中的最大值
var arr = [1, 2, 3, 4, 5, 6],
    max;

max = Math.max.apply(Math, arr);
console.log(max);    // 6

2.4 绑定this指向

var foo = {
    name: "foo",
    showName: function() {
        console.log(this.name);
    }
}

var bar = {
    name: "bar"
}

foo.showName.apply(bar);    // bar

2.5 继承

// 定义父类构造函数
var Father = function(name, age) {
    this.name = name;
    this.age = age;
};

// 定义子类构造函数
var Student = function(name, age, high) {
    // 继承父类
    Father.call(this, name, age);
    this.high = high;
};

Student.prototype.message = function() {
    console.log("name: " + this.name + ",age: " + this.age + ",high: " + this.high);
}

new Student("xiaoming", 12, "1.6m").message();    // name: xiaoming,age: 12,high: 1.6m

2.6 实现ES6 扩展运算符功能

(_console = console).log.apply(_console, [1, 2, 3]);
打开App,阅读手记
21人推荐
发表评论
随时随地看视频慕课网APP