当前位置：网站首页>JS this关键字

JS this关键字

2022-08-11 05:29:00 【wendZzz】

前言

this这个话题，学习、工作、面试，绕不开的难点。

先来看个题目：

var name = "小红";
function a() {
    
    var name = "小白";
    console.log(this.name);
}
function d(i) {
    
    return i();
}
var b = {
    
    name: "小黄",
    detail: function() {
    
        console.log(this.name);
    },
    show: function() {
    
        return function() {
    
            console.log(this.name);
        }
    }
}
var c = b.detail;
b.a = a;
var e = b.show();
a();
c();
b.a();
d(b.detail);
e();

先自己做一下，再把这段代码放进控制台输出一下结果查看答案。

如果有不对的，下面我就来讲个故事，带你梳理一下this关键字绑定的考点。

默认绑定

小明是个吹牛大王，每当人家问他有没有女朋友时，他看到哪个女孩就说这就是他的女朋友。

没有明确到具体说哪一个是他的，他的女朋友在这儿就是全局范围的，似乎全世界的女孩子都属于他一样。

例如以下代码：

function girl() {
    
    console.log(this);
}
girl();

定义一个girl 函数，直接输出this ，在全局环境下调用这个函数。查看控制台能看到结果输出的是Window 。

隐式绑定

过来几年又有人问小明的女朋友，这时候小明真的有女朋友了，给人介绍了具体的姓名，身高，体重等信息。

这就相当于一个对象里面的属性值都是明确的，例如以下代码：

var girl = {
    
    name: "小红",
    height: 170,
    weight: 55,
    detail: function() {
    
        console.log(`姓名：${
      this.name}`);
        console.log(`身高：${
      this.height}`);
        console.log(`体重：${
      this.weight}`);
    }
}
girl.detail();

创建一个girl对象，里面分别有姓名，身高，体重和一个函数，也就是girl对象的方法，这个方法输出小红的信息。每当调用这个方法时，就会出现隐式绑定。这里调用是girl对象里的方法，输出的里面的this就会绑定girl对象。

硬绑定

时间过了两年，小明变得很花心了，同时拥有三个女朋友，除了原本的小红，还有小白和小黄。但是小明并不想介绍小红给别人认识，只想介绍小白和小黄。

例如以下代码：

var girlName = {
    
    name: "小红",
    sayName: function() {
    
        console.log(`My girlfriend is ${
      this.name}`);
    }
}
var mistress_one = {
    
    name: "小白"
}
var mistress_two = {
    
    name: "小黄"
}
girlName.sayName.call(mistress_one);
girlName.sayName.call(mistress_two);

创建一个girlName对象，里面有个输出名字的方法。再创建两个对象，分别记录各自的姓名，最后用call分别调用对象的方法。

讲到call，就不得不提到apply，最后输出换成apply，输出的结果是一样的。

girlName.sayName.apply(mistress_one);
girlName.sayName.apply(mistress_two);

apply 和 call

JS中，每一个Function对象都有一个apply()方法和一个call()方法。

apply

调用一个对象的一个方法，用另一个对象替换当前对象。

语法：

function.apply(thisObj[, argArray]);

call

调用一个对象的一个方法，用另一个对象替换当前对象。

语法：

function.call(thisObj[, arg1[, arg2[, [,...argN]]]]);

从上就可以看出它们的异同之处，相同的就是它们的定义，也就是作用是一样的，不同就是它们的使用语法不一样，具体就是传入的参数列表形式不同。

最常用的例子就是函数继承：

function Animal(name) {
    
    this.name = name;
    this.show = function() {
    
        console.log(this.name);
    }
}
function Cat(name) {
    
    Animal.apply(this, [name]);
    // animal.call(this, name);
}
var myCat = new Cat("一天");
myCat.show();

还有个apply的妙用，实现两数组的合并。

var a = [1,2,3];
var b = [4,5,6];
Array.prototype.push.apply(a, b);

输出结果是一个数组的长度，但打印a查看就发现a被修改成合并之后的值了。a调用了push方法，参数是通过apply将数组转换为参数列表的集合。

可以试试这里采用call会是什么样结果。

构造函数绑定

又过去一段时间，小明幡然悔悟，将自己脚踏三只船的行为告诉了小红恳求原谅，没成想小红竟然原谅了他，两人步入婚姻修成正果。

例如以下代码：

function Lover(name) {
    
    this.name = name;
    this.sayName = function() {
    
        console.log(`my wife is ${
      this.name}`)
    }
}
var name = "小白";
var hostess = new Lover("小红");
hostess.sayName();