三、js中This之谜

2018-05-31  本文已影响8人  怀念不能

当一个函数被调用时，会创建一个活动记录（执行上下文）。

这个记录会包含函数在哪里被调用（调用栈）、函数的调用方法、传入的参数>等信息。

this就是记录的其中一个属性，会在函数执行的过程中用到。

this既不指向函数自身也不指向函数的作用域。

this实际上是在函数被调用时发生的绑定，它指向什么完全取决于函数在哪里被调用。
在严格模式下，一般函数调用的时候this指向undefined。

一、为什么要使用this

var me = {  
    name: "fenfei"  
};  
  
//不使用this，调用  
function speak(name){  
    console.log("Hello, I'm "+ name);  
}  
speak(me.name);     //Hello, I'm fenfei  
  
//使用this，调用  
function speak(){  
    console.log("Hello, I'm "+ this.name);  
}  
speak.call(me);     //Hello, I'm fenfei

二、this存在的两个误解

（1）this指向函数自身；
（2）this指向函数的作用域。

作用域无法通过JavaScript代码访问，它存在于JavaScript引擎内部。每当把this和词法作用域的查找混合使用时，一定要提醒自己，这是无法实现的！

this是在运行时进行绑定的，并不是在编写时绑定，它的上下文取决于函数调用时的各种条件。this的绑定和函数声明的位置没有任何关系，只取决于函数的调用位置（也就是函数的调用方式）！

三、绑定规则

1）默认绑定

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

2）隐式规则

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

。当foo（）被调用时，this被绑定到obj，因此this.a和obj.a是一样。

function foo() {
  console.log(this.a);
}
var obj = {
    a: 2,
    foo: foo
};
var bar = obj.foo; // 函数  
var a = "oops, global"; //
bar(); // "oops, global"

。虽然bar是obj.foo的一个引用，但是实际上，它引用的是foo函数本身。
因此此时的bar()其实是一个不带任何修饰的函数调用，应用了默认绑定。
3）显示绑定

var name="全局";
var xpg={
    name:"局部"
};
function getName(){
    alert(this.name);
}
getName(xpg);//全局
getName.call(xpg);//局部
getName.call();//全局

。其中this身处函数getName中。无论this身处何处，一定要找到函数运行时的位置。此时函数getName运行时的位置,对于
（1）getName(xpg);//全局
显然，函数getName所在的对象是window，因此this的安身之处定然在window，即指向window对象，则getName返回的this.name其实是window.name，因此alert出来的是“全局”！
（2）getName.call(xpg);//局部
。其中，call指定this的安身之处就是在xpg对象，因为this被迫只能在xpg那安家，则此时this指向xpg对象， this.name其实是xpg.name，因此alert出来的是“局部”！

function f(){  
   return this.a;  
} 

var g = f.bind({a : "test"});   
//想把某个对象作为this的时候，就把它传进去，得到一个新对象g
console.log(g()); // test      
 //重复调用的时候，this已经指向bind参数。
 //这对于我们绑定一次需要重复调用依然实现绑定的话，会比apply和call更加高效（看下面这个例子）
var o = {a : 37, f : f, g : g};  
console.log(o.f(), o.g()); // 37, test   
//o.f()通过对象的属性调用，this指向对象o;
//比较特殊的是即使我们把新绑定的方法作为对象的属性调用，
//o.g()依然会按之前的绑定去走，所以答案是test不是g

4）new绑定

function Person(name,age) {
  this.name = name
  this.age = age
  console.log("我也只不过是个普通函数")
}
Person("zxt",22) // "我也只不过是个普通函数"
console.log(name) // "zxt"
console.log(age) // 22
var zxt = new Person("zxt",22) // "我也只不过是个普通函数"
console.log(zxt.name) // "zxt"
console.log(zxt.age) // 22

四、优先级

了解了函数调用中this绑定的四条规则，需要做的就是找到函数的调用位置并判断对应哪条规则。

（1）函数是否是new绑定？如果是，this绑定的是新创建的对象。
var bar = new Foo();
（2）函数是否通过call、apply显示绑定或硬绑定？如果是，this绑定的是指定的对象。
var bar = foo.call(obj);
（3）函数是否在某个上下文对象中隐式调用？如果是，this绑定的是那个上下文对象。
var bar = obj.foo();
（4）上述全不是，则使用默认绑定。如果在严格模式下，就绑定到undefined，否则绑定到全局window对象。
var bar = foo();

new绑定和call、apply无法一起使用，因此不能使用new foo.call(obj).

五、this绑定例外

1）被忽略的绑定

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

2)间接引用
eg：

function foo() {
  console.log(this.a);
}
var a = 2; 
var o = { a: 3, foo: foo }; 
var p = { a: 4 }; 
o.foo(); // 3
(p.foo = o.foo)(); // 2

var name = "Tom";
var Bob = {
    name: "Bob",
    show: function(){
        alert(this.name);
    }
}
var show = Bob.show;
show();　　//Tom

。你可能也能理解成show是window对象下的方法，所以执行时的当前对象时window。但局部变量引用的函数上，却无法这么解释：

var name = "window";
var Bob = {
    name: "Bob",
    showName: function(){
        alert(this.name);
    }
};
var Tom = {
    name: "Tom",
    showName: function(){
        var fun = Bob.showName;
        fun();
    }
};
Tom.showName();　　//window

4)在浏览器中setTimeout、setInterval和匿名函数执行时的当前对象是全局对象window:

var name = "Bob";  
var nameObj ={  
      name : "Tom",  
      showName : function(){  
          alert(this.name);  
      },  
      waitShowName : function(){  
          setTimeout(this.showName, 1000);  
      }  
 };  
 nameObj.waitShowName();

5)软绑定
eg：

var count=2;
var obj={
    count:0,
    cool:function coolFn(){
        console.log(this.count);//0
         var self=this;
        if(self.count<1){
            setTimeout(function timer(){
                self.count++;
                console.log("awesome?");
                console.log(self.count);//1
                console.log(this.count);//2
            },100);
        }
    }
};
obj.cool();

6)dom事件中的this

（1）直接在dom元素中使用
<input id="btnTest" type="button" value="提交" onclick="alert(this.value))" />

（2）给dom元素注册js函数

<script type="text/javascript">
  function thisTest(){
  alert(this.value); // 弹出undefined, this在这里指向??
}
</script>
<input id="btnTest" type="button" value="提交" onclick="thisTest()" />

。分析：onclick事件直接调用thisTest函数，程序就会弹出undefined。
因为thisTest函数是在window对象中定义的， 所以thisTest的拥有者（作用域）是window，thisTest的this也是window。而window是没有value属性的，所以就报错了。

<input id="btnTest" type="button" value="提交" />
<script type="text/javascript">
  function thisTest(){
  alert(this.value); 
}
document.getElementById("btnTest").onclick=thisTest; 
//给button的onclick事件注册一个函数
</script>

。分析：在前面的示例中，thisTest函数定义在全局作用域（这里就是window对象），所以this指代的是当前的window对象。
而通过document.getElementById(“btnTest”).onclick=thisTest;这样的形式，其实是将btnTest的onclick属性设置为thisTest函数的一个副本，在btnTest的onclick属性的函数作用域内，this归btnTest所有，this也就指向了btnTest。

<input id="btnTest1" type="button" value="提交1" onclick="thisTest()" />
<input id="btnTest2" type="button" value="提交2" />
<script type="text/javascript">
function thisTest(){
this.value="提交中";
}
var btn=document.getElementById("btnTest1");
alert(btn.onclick); //第一个按钮函数
var btnOther=document.getElementById("btnTest2");
btnOther.onclick=thisTest;
alert(btnOther.onclick); //第二个按钮函数
</script>

其弹出的结果是：

//第一个按钮
function onclick(){
  thisTest()
}
//第二个按钮
function thisTest(){
  this.value="提交中";
}

7)this词法（ES6：箭头函数）

function foo(){
    return (a)=>{
        //this继承自foo
        console.log(this.a);
    };
}
var obj1={
    a:2
}
var obj2={
    a:3
}
var bar=foo.call(obj1);
bar.call(obj2);//2不是3！

箭头函数和new的this绑定不能被修改！

上一篇下一篇

猜你喜欢

热点阅读