js中關于this,blind,箭頭函數的詳解

代碼一

var laosiji = {
    name: "王小靜",
    drive: function(){
        // this
        // var that = this;
        setTimeout(function(){
            console.log("我是" + this.name + ", 快上車，來不及解釋了!")
        }.bind(this), 3000);
    }
}

laosiji.drive();
           

這段代碼 輸出 的name 是什麼?

解釋 因為 定時器是浏覽器執行的,是以this指的是window

代碼二

使用 var that= this; 解決

var laosiji = {
        name: "王小靜",
        drive: function(){
            // this
            var that= this;
            setTimeout(function(){
                console.log("我是" + that.name + ", 快上車1，來不及解釋了!")
            }, 3000);
        }
    }
    
    laosiji.drive();
           

這樣就可以了

代碼三

使用blind也行

var laosiji = {
    name: "王小靜",
    drive: function(){
        // this
        // var that = this;
        setTimeout(function(){
            console.log("我是" + this.name + ", 快上車1，來不及解釋了!")
        }.bind(this), 3000);
    }
}

laosiji.drive();
           

函數的bind方法

調用函數的bind方法可以生成一個目前函數的副本，這新生成的函數中的this，就指向bind方法中傳遞進來的參數

開始的時候 this就是window 對吧

然後 bind 綁定之後 新生成的方法的this就是傳進來的對象了

// //如果直接調用test，那麼調用模式為函數調用模式，裡面的this就是window

// test();

// var obj = {

// name: “wxj”

// }

// //bind方法相當于以test函數為基礎，複制出來一個新函數，這個新函數中的this，就被指向了bind方法中傳遞進來的obj對象

// var test1 = test.bind(obj);

// //由于這個test1函數是從test複制過來的，是以功能完全一緻

// //不一樣的就是這個函數中的this，是通過bind已經綁定成上面的obj了

代碼四

使用箭頭函數

//ES6中的 箭頭函數

//箭頭函數中沒有自己的this變量

//當在箭頭函數中使用this的時候，會去外層函數中找this來使用！！！

var laosiji = {
        name: "王小靜",
        drive: function(){
            // this
            // var that = this;
            setTimeout(() => {
                console.log("我是" + this.name + ", 快上車，來不及解釋了!")
            }, 3000);
        }
    }
 laosiji.drive();