面向对象 - 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 方法的参数,应该是一个对象。如果参数为空、null
和 undefined
,则默认传入全局对象
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
方法没有参数,或者参数为 null
或 undefined
,则等同于指向全局对象
如果 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
绑定当前环境(对象),并且参数为 1
和 2
,因此函数 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
上面代码中,hasOwnProperty
是 obj
对象继承的方法,如果这个方法一旦被覆盖,就不会得到正确结果。call
方法可以解决这个问题,它将 hasOwnProperty
方法的原始定义放在 obj
对象上执行,这样无论 obj
上有没有同名方法,都不会影响结果
Last updated
Was this helpful?