面向对象 - 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 {[[PrimitiveValue]]: 5}

上面代码中,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 绑定当前环境(对象),并且参数为 12,因此函数 add 运行后得到 3

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

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

// 覆盖掉继承的 hasPwnProperty 方法
obj.hasOwnProperty = function () {
  return true
}
obj.hasOwnProperty('toString') // true

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

上面代码中,hasOwnPropertyobj 对象继承的方法,如果这个方法一旦被覆盖,就不会得到正确结果。call 方法可以解决这个问题,它将 hasOwnProperty 方法的原始定义放在 obj 对象上执行,这样无论 obj 上有没有同名方法,都不会影响结果

Last updated