夯實JS基礎（一）：this的指向問題和經典面試題

不少高級編程語言都給新建立的對象分配一個引用自身的指針,好比JAVA、C++中的this指針，python中的self，JavaScript也有this指針，雖然它的指向可能相對複雜些，可是this指向的，永遠只多是對象。

1、在通常函數方法中使用 this 指代全局對象

function test(){
　  this.x = 1
　　console.log(this.x)
}
test()  // 1

2、.做爲對象方法調用，this 指代上級對象，數組同理

var obj = {
    name:"obj",
    func1 : function() {
        console.log(this)
    }
}
obj.func1()  // this--->obj

document.getElementById("div").onclick = function(){
   console.log(this)
}; // this--->div

3、函數做爲window內置函數的回調函數調用：this指向window對象（setInterval、setTimeout 等）

window.setInterval(function(){
  console.log(this)
}, 300)

4、做爲構造函數調用，this 指代 new 實例化的對象

function test(){
　　this.x = 1
}
var o = new test()
alert(o.x)  // 1

5、apply、call、bind改變函數的調用對象，此方法的第一個參數爲改變後調用這個函數的對象

var x = 0;
function test(){
　　console.log(this.x)
}
var obj = {}
obj.x = 1
obj.m = test
obj.m.apply() //0，apply()的參數爲空時，默認調用全局對象
obj.m.apply(obj); //1

6、匿名函數的執行環境具備全局性，this對象一般指向window對象

var name = 'The Window';
var obj = {
    name: 'My obj',
    getName: function() {
        return function() {
            console.log(this.name);
        };
    }
};

obj.getName()(); // 'The Window'

紙上得來終覺淺，絕知此事要躬行，一塊兒動手刷一下this的經典面試題吧

var x = 3;
var y = 4;
var obj = {
    x: 1,
    y: 6,
    getX: function() {
        var x =5;
        return function() {
            return this.x;
        }();
    },
    getY: function() {
        var y =7;
         return this.y;
    }
}
console.log(obj.getX())//3
console.log(obj.getY())//6

var name="the window";

 var object={
    name:"My Object", 
    getName:function(){ 
       return this.name;
   } 
 }

 object.getName();   //"My Object"

(object.getName)();   //"My Object"

(object.getName=object.getName)();   //"the window"，函數賦值會改變內部this的指向，這也是爲何須要在 React 類組件中爲事件處理程序綁定this的緣由;

var a=10; 
 var obt={ 
   a:20, 
   fn:function(){ 
     var a=30; 
     console.log(this.a)
   } 
 }
 obt.fn();  // 20

 obt.fn.call(); // 10

 (obt.fn)(); // 20

 (obt.fn,obt.fn)(); // 10

 new obt.fn(); // undefined

function a(xx){
  this.x = xx;
  return this
};
var x = a(5);
var y = a(6);

console.log(x.x)  // undefined
console.log(y.x)  // 6

<題目持續更新中...>