首先,this的绑定和定义的位置无关,它的指向只和调用方式有关,this只有在运行时才知道指向谁。
一,默认绑定
默认绑定,也可以说是独立函数调用,这时this指向window。
function foo() {console.log(this)
}
foo()
二,隐式绑定
隐式绑定,可以认为是函数被绑定到某个对象,通过对象来调用,此时this指向该对象。
let obj = {test: function () {console.log(this)}
}obj.test()//隐式绑定
this的指向只有在最后才能确定,即使是对象的方法赋给变量,该变量的this在该函数调用前是未知的。
let obj = {test: function () {console.log(this)}
}
let func = obj.test
func()//-----------------------------------function superfunc(func) {func()
}superfunc(obj.test)
func的调用形式为独立调用,那么即使它是由对象方法赋值而来,this的指向也是window,符合默认绑定。 或者使用高阶函数来调用,只要形式不变,那么this仍旧指向window。
三,显式绑定
显式绑定涉及三个方法,apply,call,bind。在之前使用this时,如果我们想要让this指向一个对象就只能在对象中添加方法来实现,但这样会污染对象,我们是可以借用函数来对某个对象作用的,当然,你也可以理解为我们将函数的this指向改变为某个对象,而这个过程就是显式绑定。
function foo() {console.log(this)}let obj = {name: "Mike"
}
//apply的参数传递使用数组形式
foo.apply(obj, ["a", "b", "c"])
//call的参数传递使用列表形式
foo.call(obj, "a", "b", "c")
foo.call("hello")
foo.call(1234)//调用foo时总是绑定到obj上,但不希望对象中有函数
let test = foo.bind(obj)
test()//这里的函数是独立调用,但是指向的对象却是obj,这涉及到优先级的问题
使用的方法很简单,第一个参数为this指向的对象,其余的参数为函数传参,apply和call的区别在于函数传参的方式不同,前者为数组形式,后者为列表形式。对于bind,这个属于一劳永逸的方法,只要绑定对象后,后续独立调用this仍然指向先前绑定的对象,相当于this被持续的改变为绑定对象。而apply和call是一次性的。bind实际开发中用的不多,在一些特殊情况下会被使用。
四,new绑定
new在执行时会返回一个空对象,函数的this指向也会相应的改变为该空对象,如果函数没有对象返回,那么就默认返回该空对象。如下图,constructor构造函数的函数体内创建了this.name = "Mike",但此时是无法确认this指向的(因为不明确函数调用方式,如果为独立调用this指向window),我们创建一个实例对象来接收这个空对象,因为函数调用方式为new,所以this指向空对象,所以结果也显而易见了。
function constructor() {this.name = "Mike"//this指向现在还不能确定
}
const instance = new constructor()//this指向new产生的空对象,然后返回这个对象
console.log(instance)
绑定的优先级
这个可以自己测试一下,优先级为:
new > bind > apply = call > 隐式绑定 > 默认绑定