this剖析

每一个函数的this是在挪用的时刻被绑定的,完整取决于函数的挪用位置
表现特性有点像动态作用域,从就近查找挪用栈,来推断this指向谁。

1. 默许绑定 (全局环境)

var a = 2;
function foo(){
    console.log(this.a);
}

foo() //2

这个例子中,foo()在全局环境中被裸着挪用,毫无上下文。所以这时候this被挪用的时刻从内向外寻觅a,能够找到全局变量a。

但是在严厉形式(strict mode)中,默许绑定就不见效

var a = 2;
function foo(){
    "use strict"//严厉形式

    console.log(this.a);
}

foo() //undefined

2.隐式绑定 (对象环境)

var obj = {
    a: 2,
    foo:foo
}
function foo(){
    console.log(this.a);
}

obj.foo()//2
foo()//undefined

这类绑定并不靠谱,比如在回调的状况下。

function foo(){
    console.log(this.a);
}
var obj = {
    a:2,
    foo:foo
}
setTimeout(obj.foo, 100);//undefined

为何不靠谱, 在setTimeout时挪用,this指向了setTimeout这个函数而不再是obj这个对象。

3.显式绑定(call, apply, bind)

隐式绑定把函数直接绑定到了目的对象的一个属性上。假如我们不想在对象内部包括函数援用,而想直接在某个对象上应用函数。就要用显式绑定。

function sayName(){
    console.log(this.name);
}
sayName(); //直接挪用这个函数将找不到this,返回undefine。

person1 = new Person("leo");
//sayName运用call()将this指向person1就好了。
sayName.call(person1);//"leo" 



function sayNameAndMore(age, gender){
    console.log(this.name + age + gender)
}
//apply用法
sayNameAndMore.apply(person1, [" 18 "," male "]);//leo 18 male

共同点

  • 都是被函数挪用,如someFunction.call(obj), someFunction.apply(obj)
  • 都将this指向填入的参数obj,someFunction函数定义中的一切this就能够根据想要的结果举行。

区分

  • call和apply直接实行,bind以后实行。
  • call只接收一个参数,而apply接收一个参数数组。

React中的bind

  • React中我们老是要把事宜handle函数bind到组件上。是因为事宜触发是异步的,假如不bind,触发时的this就是当时的dom元素。就像上面隐式绑定不靠谱的状况一样。

new绑定

  • new绑定触及更多知识点,不在这里写
    原文作者:ericxuan
    原文地址: https://segmentfault.com/a/1190000018626167
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞