JavaScript面向对象 - call的应用

this的动态切换,固然为JavaScript创造了巨大的灵活性,但也使得编程变得困难和模糊。有时,需要把this固定下来,避免出现意想不到的情况。JavaScript提供了callapplybind这三个方法,来切换/固定this的指向。

绑定this的方法:

Function.prototype.call()

函数实例的call方法,可以指定函数内部this的指向(即函数执行时所在的作用域)

然后在所指定的作用域中,调用该函数

var obj = {};

var f = function () {
    return this;
};

f() === window;            // true

f.call(obj) === obj;    // true

全局环境运行函数f时,this指向全局环境(浏览器为window对象)

call方法可以改变this的指向,指定this指向对象obj

然后在对象obj的作用域中运行函数f

call方法的参数,应该是一个对象

如果参数为空、nullundefined,则默认传入全局对象

var n = 123;
var obj = { n: 456 };

function a() {
    console.log(this.n);
}

a.call();            // 123

a.call(null);        // 123

a.call(undefined);    // 123

a.call(window);        // 123

a.call(obj);            // 456

a函数中的this关键字,如果指向全局对象,返回结果为123

如果使用call方法将this关键字指向obj对象,返回结果为456

可以看到,如果call方法没有参数,或者参数为nullundefined,则等同于指向全局对象

如果call方法的参数是一个原始值,那么这个原始值会自动转成对应的包装对象,然后传入call方法

var f = function () {
    return this;
};

f.call(5);        // Number

call的参数为5,不是对象,会被自动转成包装对象(Number的实例),绑定f内部的this

call方法还可以接受多个参数

func.call(thisValue, arg1, arg2, ...);

call的第一个参数就是this所要指向的那个对象,后面的参数则是函数调用时所需的参数

function add(a, b) {
    return a + b;
}

add.call(this, 1, 2);        // 3

call方法指定函数add内部的this绑定当前环境(对象),并且参数为1和2,因此函数add运行后得到3

call方法的一个应用是调用对象的原生方法

var obj = {};
obj.hasOwnProperty('toString');        // false

obj.hasOwnProperty = function () {
    return true;
};
obj.hasOwnProperty('toString');        // true

Object.prototype.hasOwnProperty.call(obj, 'toString');    // false

hasOwnPropertyobj对象继承的方法,如果这个方法一旦被覆盖,就不会得到正确结果

call方法可以解决这个问题,它将hasOwnProperty方法的原始定义放到obj对象上执行,这样无论obj上有没有同名方法,都不会影响结果

相关文章

感觉本篇文章不错,对你有收获?

¥我要小额赞助,鼓励作者写出更好的教程
80 160 120

作者:

  • 出处: https://www.mi360.cn/articles/80
  • 本文版权归作者,欢迎转载,但未经作者同意必须保留 此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

评论区

最新评论

扫码关注