this 相关(2)

zhanghaiyu-Jade 2019-03-31 原文

this 的指向与所在方法的调用位置有关，而与方法的声明位置无关

 1 var obj = {
 2     val: 1,
 3     getVal: function() {
 4         console.log(this.val);
 5     }
 6 }
 7 var obj1 = {
 8     val: 2,
 9     getVal: obj.getVal //相当于obj中的getVal被复制了一份放在obj1中，并给了它的属性getVal
10 }
11 obj.getVal(); //1
12 obj1.getVal(); //2

在浏览器中,调用方法没有明确对象的，this指向window

1 var obj = {
2     val: 1,
3     getVal: function() {
4         console.log(this.val);
5     }
6 }
7 var val = 3;
8 var getVal = obj.getVal;
9 getVal(); // 在node环境是undefined（node全局对象是global）  在浏览器中是3（浏览器全局对象是window）

 1  1 var obj = {
 2  2     val: 1,
 3  3     getVal: function() {
 4  4         console.log(this.val);
 5  5     }
 6  6 }
 7  7 var obj1 = {
 8  8     val: 2,
 9  9     getVal: function() {
10 10         var getVal = obj.getVal; //相当于obj中的getVal被复制了一份放在obj1中，并给了它的属性getVal
11 11         getVal();
12 12     }
13 13 
14 14 }
15 15 var val = 34;
16 16 obj1.getVal(); //实际上是在这调用的 (在node环境是undefined（node全局对象是global）  在浏览器中是34（浏览器全局对象是window）)

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

1 var that = this;
2 
3 (function() {
4     console.log(this === that); // 在浏览器中是true 在node是false
5 })();
6 
7 setTimeout(function() {
8     console.log(this === that); // 在浏览器中是true 在node是true
9 }, 0);

如果js中定义的全局对象在浏览器中是执行window，会加入window中的一个同名属性，但是在node中就一定加到global中了吗，并不是，在node 中是有个global全局作用域，但是除非你指名加到global上，global上面才会有，否则不会有，node的多有文件也不会访问到这个属性，node其实是有文件作用域的，把变量定义在文件中，其他文件是不会共享这个变量的。这是和浏览器的window是不同的哦

applay/call/bind能够强制改变函数执行时的当前对象，让this指向其他对象

var obj = {
    val: 1,
    getVal: function() {
        console.log(this.val);
    }
}
var obj1 = {
    val: 2
}
var val = 34;
// 调用位置
obj.getVal.call(); //node下是undefined //浏览器下是34  不传值默认是全局对象
obj.getVal.call(obj1); //2 
obj.getVal.apply(); //node下是undefined  //浏览器下是34 不传值默认是全局对象
obj.getVal.apply(obj1); //2
obj.getVal.bind(this)(); //node下是undefined  //浏览器下是34 
obj.getVal.bind(obj1)(); //2

严格模式下 this不会被赋值到window下而是undefined

 1 (function() {
 2     'use strict';
 3 
 4     function getVal() {
 5         console.log(this);
 6     }
 7 
 8     console.log(this); // undefined
 9     getVal.call(this); // undefined
10     getVal.call(null); // null 
11     getVal.call(undefined); // undefined
12 })();