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();