前言
首先我们来看一个示例。定义一个函数,用三种不同的方式调用,会产生三种不同的结果
function foo(){ console.log(this); } foo() //window let obj ={ name:'sss', foo:foo } obj.foo()//{name:'sss',foo:function} foo.call("abc") // 生成包装类型对象,String {'abc'}
一个函数调用方式不同this指向也不尽相同,为什么会出现这么令人费解的现象呢?是因为在JavaScript中函数的this是动态绑定的(箭头函数除外)。经过一段时间对this的研究,得出了以下几个结论:
- 函数在调用时,JavaScript会默认给this绑定一个值。
- this的绑定与编写的位置没有关系
- this的绑定与调用的方式以及调用的位置有关
- this的绑定是在运行时进行的
this绑定与调用方式和调用位置有关,那么根据调用方式和调用位置,我们该怎么确定this指向呢?
最近这段时间阅读了《你不知道的JavaScript》这本书,让我对js有了更深刻的理解,里面也说到了this绑定问题,如果有兴趣推荐大家去看看这本书,这里我就不过多介绍了,下面来聊聊怎么确定this指向吧,这是我从这本书还有网上的一些资料总结出来的,也是自己的理解,再也不用担心搞不清this指向了,嘿嘿!
this四大绑定规则
一.默认绑定
独立函数调用的就是默认绑定,简单说就是函数没有绑定到某个对象上进行调用,默认返回window(注意:严格模式返回undefined)
举例:
function foo(){ console.log(this); } foo() // 独立函数调用 let obj ={ name:'sss', bar:function(){ console.log(this); } } let ff = obj.bar ff() // 函数在对象中,但是独立函数独立函数调用 // 高阶函数 function test(fn){ fn() } test(obj.bar) //相当于fn=obj.bar fn() 所以还是独立函数调用
结果都是window
二.隐式绑定
在调用位置中,通过对象来发起的调用会返回调用它的那个对象
举例:
let obj ={ name:'sss', bar:function(){ console.log(this); } } obj.bar() // 通过对象调用,结果是 obj
有一种更微妙但是又更常见的情况发生在传入回调函数时:
function foo(){ console.log(this); } setTimeout(foo,1000) //Window let btn = document.querySelector('button') btn.addEventListener('click',foo) //button let ar = [1,2,3,4] ar.forEach(item=>console.log(this)) //Window
setTimeout内部绑定的this是window ,btn的this指向按钮,forEach方法指向Window
三.new绑定
JavaScript中的函数也可以当作一个构造函数来使用,也就是通过new关键字
我们先来回忆一下new关键字做了什么:
- 创建(构造)一个全新的对象
- 这个新对象执行[[prototype]]连接
- 将这个新对象绑定在this上
- 没有显示返回其他对象时,即返回这个新对象
代码示例:
function person(name) { this.name =name console.log(this); } new person('sss') // person{name:'sss'}
四.显示绑定
相当于强制绑定,使用call,bind,apply等一系列方法进行强制绑定;
显示绑定简单来说就是通过一些方法来进行强制绑定,this就是强制绑定的那个对象;代码示例:
// 显示绑定 function foo(){ console.log(this); } let obj ={ name:'sss' } // 此时我们希望this指向obj 如果是正常情况下该这么指向呢 // 1 obj.foo = foo obj.foo() // obj // 但是我们希望直接绑定 就可以通过call 来进行显示绑定 foo.call(obj) //obj foo.call("123") //"123" foo.call(123) //123 foo.call(undefine) // 特例:window
call,apply,bind简单介绍:
相同点:
- 都是改变this指向的;
- 第一个参数都是this要指向的对象;
- 都可以利用后续参数传参;
区别:
- call和bind的参数是依次传参,一一对应的;
- 但apply只有两个参数,第二个参数为数组;
- call和apply都是对函数进行直接调用,而bind方法返回的仍是一个函数;
绑定规则优先级
知道了this的四种绑定规则,那么,这四种规则该怎么用呢?
就像运算符有优先级规则一样,this四种绑定规则也有优先级 ,下面来介绍一下它的优先级规则
直接上结论吧,我们可以按照下面这个顺序来判断this:
- 函数是否在new中调用(new绑定)?如果是的话this绑定的就是新创建的对象;
- 函数是否通过call、apply、bind调用(显示绑定)?如果是的话,this绑定的是指定的对象;
- 函数是否在某个上下文对象中调用(隐式绑定)?如果是的话,this绑定的是那个上下文对象;
- 如果都不是的话,使用默认绑定,绑定到全局对象(严格模式绑定到undefined)
代码示例:
//优先级 function foo(){ console.log(this); } let obj = { name:'ss', foo:foo } obj.foo.call('nn') // 结果是 包装对象nn // 显然显示大于隐形绑定 new obj.foo() // 结果是foo实例对象 // new绑定大于隐式绑定 // new 和显示绑定绑定不能一起使用 let f = foo.bind(obj) new f() // 结果依然是foo实例对象 new绑定>显示绑定 let f2 = foo.bind(obj) f2.call('ss') // 结果是obj对象 bind>call
输出:
这个判断顺序几乎适用所有情况,当然也有例外,我们需要注意这些例外:
1.显示绑定传入null和undefine
function foo(){ console.log(this); } foo.apply("ss") //"ss" foo.apply(null) //Window foo.apply(undefined) //Window
说明在我们传入null和undefined时,会忽略显示绑定,使用默认规则
另外,在严格模式下则是会返回基本的数据类型
"use strict" function foo(){ console.log(this); } foo.apply("ss") //"ss" foo.apply(null) //null foo.apply(undefined) //undefine
2.创建一个函数的 间接引用,这种情况也是使用默认绑定规则
function foo(){ console.log(this); } let obj = { foo:foo } (a = obj.foo)() // Window
a =obj.foo 会默认返回foo() 相当于独立调用,使用默认规则
3.箭头函数
箭头函数中是没有this的,所以它会去不断去上一层的作用域查找this并使用
面试题
现在你已经掌握了如何判断this指向了,来几个面试题试试手吧
题1
let name = 'Window'; let Person = { name:'person', say:function(){ console.log(this); } }; let ss = Person.say; ss(); // Window Person.say(); // Person (Person.say)(); // Person (b = Person.say)(); // Window
题2
var name = 'window' // {} -> 对象 // {} -> 代码块 var person1 = { name: 'person1', foo1: function () { console.log(this.name) }, foo2: () => console.log(this.name), foo3: function () { return function () { console.log(this.name) } }, foo4: function () { // console.log(this) // 第一个表达式this -> person1 // console.log(this) // 第二个表达式this -> person2 // console.log(this) // 第三个表达式this -> person1 return () => { console.log(this.name) } } } var person2 = { name: 'person2' } // 开始题目: person1.foo1(); // 隐式绑定: person1 person1.foo1.call(person2); // 显式绑定: person2 person1.foo2(); // 上层作用域: window person1.foo2.call(person2); // 上层作用域: window person1.foo3()(); // 默认绑定: window person1.foo3.call(person2)(); // 默认绑定: window person1.foo3().call(person2); // 显式绑定: person2 person1.foo4()(); // person1 person1.foo4.call(person2)(); // person2 person1.foo4().call(person2); // person1
题3
var name = 'window' /* 1.创建一个空的对象 2.将这个空的对象赋值给this 3.执行函数体中代码 4.将这个新的对象默认返回 */ function Person(name) { this.name = name this.foo1 = function () { console.log(this.name) }, this.foo2 = () => console.log(this.name), this.foo3 = function () { return function () { console.log(this.name) } }, this.foo4 = function () { return () => { console.log(this.name) } } } // person1/person都是对象(实例instance) var person1 = new Person('person1') var person2 = new Person('person2') // 面试题目: person1.foo1() // 隐式绑定: person1 person1.foo1.call(person2) // 显式绑定: person2 person1.foo2() // 上层作用域查找: person1 person1.foo2.call(person2) // 上层作用域查找: person1 person1.foo3()() // 默认绑定: window person1.foo3.call(person2)() // 默认绑定: window person1.foo3().call(person2) // 显式绑定: person2 person1.foo4()() // 上层作用域查找: person1(隐式绑定) person1.foo4.call(person2)() // 上层作用域查找: person2(显式绑定) person1.foo4().call(person2) // 上层作用域查找: person1(隐式绑定)
题4
var name = 'window' /* 1.创建一个空的对象 2.将这个空的对象赋值给this 3.执行函数体中代码 4.将这个新的对象默认返回 */ function Person(name) { this.name = name this.obj = { name: 'obj', foo1: function () { return function () { console.log(this.name) } }, foo2: function () { return () => { console.log(this.name) } } } } var person1 = new Person('person1') var person2 = new Person('person2') person1.obj.foo1()() // 默认绑定: window person1.obj.foo1.call(person2)() // 默认绑定: window person1.obj.foo1().call(person2) // 显式绑定: person2 person1.obj.foo2()() // 上层作用域查找: obj(隐式绑定) person1.obj.foo2.call(person2)() // 上层作用域查找: person2(显式绑定) person1.obj.foo2().call(person2) // 上层作用域查找: obj(隐式绑定)
以上就是一文搞懂JavaScript中的this绑定规则的详细内容,更多关于JavaScript this绑定规则的资料请关注阿兔在线工具其它相关文章!