JavaScript中的this关键字的四种绑定方式

为什么使用this

        在函数中使用对象名来访问他的属性时，在对象名过长的时候，不易于书写，于是使用this替代。

this的四种绑定规则

        默认绑定：函数被调用的时候，this默认指向全局window对象。

function girl (){
    console.log(this);
}
girl();  // 输出window对象

       隐式绑定：隐式绑定，this指向调用函数的对象

var girl = {
    name:"小红",
    height:160,
    detail:function(){
        console.log('姓名：'+this.name);
        console.log('身高：'+this.height);
    }
}
girl.detail();

      硬绑定：使用call，bind，apply强行绑定this指向方向

var girName = {
    name:'小红';
    sayName:function(){
        console.log('我的女朋友是'+this.name);
    }

}
var girl1 = {
    name:'小白';
}
var girl2 = {
    name:'小黄';
}
girlName.sayName.apply(girl1);  //我的女朋友是小白
girlName.sayName.apply(girl2);  //我的女朋友是小黄

        构造函数绑定（new）： 使用new初始化对象的的时候，会将构造函数的this绑定到该对象上。

function Lover(name)(){
    this.name = name ;
    this.sayName = function(){
        console.log('我的老婆是'+this.name);
    }
}
var name = '小白';
var xiaoHong = new Lover('小红');
xiaoHong.sayName();  //我的老婆是小红

本内容总结于JavaScript的this关键字 - Web前端工程师面试题讲解_哔哩哔哩_bilibili的视频如果有兴趣大家可以看一下。