js中this关键字测试集锦

2021-12-16 09:41:07

参考：阮一峰《javascript的this用法》及《JS中this关键字详解》

this是Javascript语言的一个关键字它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。定义：this是包含它的函数作为方法被调用时所属的对象。总原则，this指的是，调用函数的那个对象，this永远指向函数运行时所在的对象！而非创建时的。

以下是基于浏览器环境做的测试：

作为函数调用：

function $(){

    this.count = 1;

    return this;

}

window.onload = function(){

    console.info($());

}

控制台返回结果如下：

js中this关键字测试集锦

一个window对象。

对于内部函数，即声明在另外一个函数体内的函数，这种绑定到全局对象的方式会产生一个问题，即它会隐式声明全局变量。代码如下：

var point = {

    x: 0,

    y: 0,

    moveTo: function(x, y) {

        var fn1 = function(x) {

            this.x = this.x + x;

            return this.x;

        };

        var fn2 = function(y) {

            this.y = this.y + y;

        };

        return fn1();

    }

}

console.log(point.moveTo());

结果是：

js中this关键字测试集锦

而若将fn1中return的值改为this的话，打印结果：

js中this关键字测试集锦

一个window全局对象。这属于 JavaScript 的设计缺陷，正确的设计方式是内部函数的 this 应该绑定到其外层函数对应的对象上，这个设计错误错误的后果是方法不能利用内部函数来帮助它工作，因为内部函数的this被绑定了错误的值，所以不能共享该方法对对象的访问权。为了规避这一设计缺陷，聪明的 JavaScript 程序员想出了变量替代的方法，约定俗成，该变量一般被命名为 that。如下：

var point = {

    x: 0,

    y: 0,

    moveTo: function(x, y) {

        var that = this;

        var x = x;

        var y = y;

        var fn1 = function(x) {

            that.x = that.x + x;

            return that;

        };

        var fn2 = function(y) {

            that.y = that.y + y;

        };

        return fn1(x);

    }

}

console.log(point.moveTo(1,1));　　

返回结果：

js中this关键字测试集锦

函数调用中，this总是指向函数的直接调用者（而非间接调用者）。如果在严格模式下，有可能输出undefined，严格模式下，禁止this关键字指向全局对象。如下：

'use strict';

    console.log(this === window); // true

    var foo = function() {

        console.log(this === window);

        console.log('this:',this);

    };

    foo();

    window.foo();

控制台打印结果是：

js中this关键字测试集锦

使用that的另一个例子：

var myObj = {

    value: 0,

    increment: function(inc) {

        this.value += typeof inc === 'number' ? inc: 1;

    }

}

myObj.increment();

document.writeln(myObj.value);

myObj.increment(2);

document.writeln(myObj.value);

function add(num1, num2){

    return num1 + num2;

}

console.log(add(40,27));

myObj.double = function() {

    var that = this;

    var helper = function() {

        that.value = add(that.value, that.value);

    }

    helper();

}

myObj.getValue = function() {

    var that = this;

    return that.value;

}

myObj.double();

document.writeln(myObj.getValue());

作为对象方法调用：

如果一个调用表达式包含一个属性存取表达式（即一个.点表达式或者[subscript]下标表达式）,那么它被当做一个方法来调用。另一段代码：

var o = {};

o.fn = $;

function $(){

    console.log(this);

}

window.onload = function(){

    o.fn();

}

控制台返回结果如下：

js中this关键字测试集锦

调用函数的o对象。

在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window；

另外一种嵌套调用：

var personA={

    name:"xl",

    showName:function(){

        console.log(this.name);

    }

}

var personB={

    name:"XL",

    sayName:personA.showName

}

personB.sayName();

控制台输出结果：

js中this关键字测试集锦

从这里很明显的看出，在js中this关键字指向是直接调用它的对象，而非间接的。

作为函数及对象方法的混合调用：

var myObject={

    foo : "",

    func : function(){

    var self = this;

    console.log("outer func : this.foo = " + this.foo );

    console.log("outer func : self.foo = " + self.foo );

    (function(){

        console.log("inner func : this.foo = " + this.foo );

        console.log("inner func : self.foo = " + self.foo );

    }());

}

}

myObject.func();

输出结果如下：

js中this关键字测试集锦

证明函数内部函数的调用是由全局对象引发的，这在上面有所阐述。

将构造函数作为函数调用：

function Person(name) {

    this.name = name;

}

var personA = Person("xl");

// console.log(personA.name);

console.log(window.name);

console.log(name);

var personB = new Person("xl");

console.log(personB.name);

控制台打印结果：

js中this关键字测试集锦

注释掉的console因为那么已经成为全局对象的属性，因此打印为未定义变量报错。第二个显式调用，第三个隐式调用。最后一个则是作为构造方法调用。

作为构造函数调用：

JavaScript 支持面向对象式编程，与主流的面向对象式编程语言不同，JavaScript 并没有类（class）的概念，而是使用基于原型（prototype）的继承方式。相应的，JavaScript 中的构造函数也很特殊，如果不使用 new 调用，则和普通函数一样。作为又一项约定俗成的准则，构造函数以大写字母开头，提醒调用者使用正确的方式调用。如果调用正确，this 绑定到新创建的对象上。

通过new实例化一个函数：

function $(){

    console.log(this);

}

var fn = new $();

控制台输出如下：

js中this关键字测试集锦

this就指这个新对象。

使用apply或call调用：

使用apply方法（（当然使用Function.call也是可以的）），另一个方法 call 也具备同样功能，不同的是最后的参数不是作为一个数组统一传入，而是分开传入的。这两个方法异常强大，他们允许切换函数执行的上下文环境（context），即 this 绑定的对象。很多 JavaScript 中的技巧以及类库都用到了该方法。

function $(){

    console.log(this);

}

var o = {};

o.m = $;

o.m.apply();　　

控制台打印结果：

js中this关键字测试集锦

注：Function.apply(obj,args)方法能接收两个参数

obj：这个对象将代替Function类里this对象

args：这个是数组，它将作为参数传给Function（args-->arguments）

apply()的参数为空时，默认调用全局对象。

如果将call的第一个destination的值设为一个对象，如下：

function $(){

    console.log(this);

}

var u = {};

var o = {};

o.m = $;

o.m.apply(u,null);

控制台打印结果如下：

js中this关键字测试集锦

也即this指向了apply绑定的那个对象。

作为构造函数及apply/call的混用：

//下面这段代码模拟了new操作符(实例化对象)的内部过程

    function person(name){

        var o={};

        o.__proto__=Person.prototype;  //原型继承

        Person.call(o,name);

        return o;

    }

    var personB=person("xl");

    console.log(personB.name);  // 输出  xl

在person里面首先创建一个空对象o，将o的proto指向Person.prototype完成对原型的属性和方法的继承。Person.call(o,name)这里即函数Person作为apply/call调用(具体内容下方)，将Person对象里的this改为o，即完成了o.name=name操作。返回对象o。

作为回调函数的this：

我们来看看 this 在 JavaScript 中经常被误用的一种情况：回调函数。JavaScript 支持函数式编程，函数属于一级对象，可以作为参数被传递。请看下面的例子 myObject.handler 作为回调函数，会在 onclick 事件被触发时调用，但此时，该函数已经在另外一个执行环境（ExecutionContext）中执行了，this 自然也不会绑定到 myObject 对象上。

 button.onclick = obj.handler;

代码如下：

<p id="p">click me</p>

<script type="text/javascript">

var obj = {

    handler: function() {

        console.log(this);

    }

}

var p = document.getElementById("p");

p.onclick = obj.handler;

执行结果如下：

js中this关键字测试集锦

很显然指向是触发click事件的dom元素对象，而非obj对象。这是 JavaScript 新手们经常犯的一个错误，为了避免这种错误，许多 JavaScript 框架都提供了手动绑定 this 的方法。比如 Dojo 就提供了 lang.hitch，该方法接受一个对象和函数作为参数，返回一个新函数，执行时 this 绑定到传入的对象上。使用 Dojo，可以将上面的例子改为：button.onclick = lang.hitch(myObject, myObject.handler);在新版的 JavaScript 中，已经提供了内置的 bind 方法供大家使用。

eval方法中this的指向：

JavaScript 中的 eval 方法可以将字符串转换为 JavaScript 代码，使用 eval 方法时，this 指向哪里呢？答案很简单，看谁在调用 eval 方法，调用者的执行环境（ExecutionContext）中的 this 就被 eval 方法继承下来了。

var name="XL";
var person={
     name:"xl",
     showName:function(){
     eval("console.log(this.name)");
  }
}

person.showName(); //输出 "xl"

var a=person.showName;

a(); //输出 "XL"

第一次的执行环境是person对象，第二个是global全局环境。

Function.prototype.bind()方法：

1.var name = "XL";

           function Person(name) {
              this.name = name;
               console.log(this);
              this.sayName = function() {
                  console.log(this);
                  setTimeout(function(){
                  console.log(this);
                  console.log("my name is " + this.name);
              },50)
           }
       }
var person = new Person("xl");
person.sayName();

2.var name="XL";

    function Person(name){

        this.name=name;

        this.sayName=function(){

            setTimeout(function(){

                console.log("my name is "+this.name);

            }.bind(this),50)  //注意这个地方使用的bind()方法，绑定setTimeout里面的匿名函数的this一直指向Person对象

        }

    }

    var person=new Person("xl");

    person.sayName(); //输出 “my name is xl”;

这里setTimeout(function(){console.log(this.name)}.bind(this),50);,匿名函数使用bind(this)方法后创建了新的函数，这个新的函数不管在什么地方执行，this都指向的调用它的对象,而非window。而如果不加bind在第一段代码中，window执行环境中创建了一个变量person，被赋值了Person的实例，此时的调用顺序是person调用了sayName这个方法，这个方法被赋值了一个函数（此处有问题，该赋值函数是匿名还是非匿名？下篇讨论），创建了一个执行环境，此时setTimeOut函数开始执行，创建一个环境。匿名函数及setTimeout/setInterval在非手动改变指向额情况下都在全局作用域当中。

SO，第一段代码的打印结果是：

js中this关键字测试集锦

sf的解释：setTimeout/setInterval/匿名函数执行的时候，this默认指向window对象，除非手动改变this的指向。在《javascript高级程序设计》当中，写到：“超时调用的代码(setTimeout)都是在全局作用域中执行的，因此函数中的this的值，在非严格模式下是指向window对象，在严格模式下是指向undefined”。本文都是在非严格模式下的情况。

第二段代码的打印结果是：

js中this关键字测试集锦

这相当于手动将this进行了强制转向。

另一种手动转向的方法：

var name="XL";

    function Person(){

        this.name="xl";

        var that=this;

        this.showName=function(){

            console.log(that.name);

        }

        setTimeout(this.showName,50)

    }

    var person=new Person(); //输出 "xl"

借用了上面提到的that保存this指针值进行复用的技巧。

匿名函数中的this：

var name="XL";

    var person={

        name:"xl",

        showName:function(){

            console.log(this.name);

        }

        sayName:function(){

            (function(callback){

                callback();

            })(this.showName)

        }

    }

    person.sayName();  //输出 XL

    var name="XL";

    var person={

        name:"xl",

        showName:function(){

            console.log(this.name);

        }

        sayName:function(){

            var that=this;

            (function(callback){

                callback();

            })(that.showName)

        }

    }

    person.sayName() ;  //输出  "xl"

此处采用了that技巧保存this指针。

箭头函数（点击这里）：

箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。示例代码：

var obj = {
     birth: 1990,
     getAge: function (year) {
     var b = this.birth; // 1990
     var fn = (y) => y - this.birth; // this.birth仍是1990
     return fn.call({birth:2000}, year);
}
};
console.log(obj.getAge(2015)); // 25

控制台打印结果：

js中this关键字测试集锦

this的四种使用场景

面向对象的语言中，this 关键字的含义是明确且具体的，即指代当前对象。一般在编译期确定下来，或称为编译期绑定。而在 JavaScript 中，this 是动态绑定，或称为运行期绑定，这就导致 JavaScript 中的 this 关键字有能力具备多重含义，它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式，带来灵活性也带来困惑。js“超级”迟绑定（ very late binding）使得函数可以对this高度复用。通过this可取得它们所属对象的上下文的方法称为公共方法。使用this关键字在面向对象语言中多数情况下是为了避免命名冲突。总的来说，JavaScript 中函数的调用有以上几种方式：作为对象方法调用，作为函数调用，作为构造函数调用，和使用 apply 或 call 调用。JavaScript 中的函数既可以被当作普通函数执行，也可以作为对象的方法执行，这是导致 this 含义如此丰富的主要原因。

函数的执行环境

JavaScript 中的函数既可以被当作普通函数执行，也可以作为对象的方法执行，这是导致 this 含义如此丰富的主要原因。一个函数被执行时，会创建一个执行环境（ExecutionContext），函数的所有的行为均发生在此执行环境中，构建该执行环境时，JavaScript 首先会创建 arguments变量，其中包含调用函数时传入的参数。接下来创建作用域链。然后初始化变量，首先初始化函数的形参表，值为 arguments变量中对应的值，如果 arguments变量中没有对应值，则该形参初始化为 undefined。如果该函数中含有内部函数，则初始化这些内部函数。如果没有，继续初始化该函数内定义的局部变量，需要注意的是此时这些变量初始化为 undefined，其赋值操作在执行环境（ExecutionContext）创建成功后，函数执行时才会执行，这点对于我们理解 JavaScript 中的变量作用域非常重要，鉴于篇幅，我们先不在这里讨论这个话题。最后为 this变量赋值，如前所述，会根据函数调用方式的不同，赋给 this全局对象，当前对象等。至此函数的执行环境（ExecutionContext）创建成功，函数开始逐行执行，所需变量均从之前构建好的执行环境（ExecutionContext）中读取。

本文是综合了互联网多篇文章结论之后亲测的结论，目的也在于细化自己的知识体系，并进而更深刻的理解js的内核实现。经过此番梳理，对this的灵活指向已经有了一个比较清晰的认识，不过还需在实际的工程中不断运用以达到完全掌握。不过经过此一番，没必要死记硬背以上多种场景，若需使用的时候，在对印位置打印出来看看不就知道了？

上一篇：freemarker报错之九


下一篇：11 个超棒的 jQuery 分步指引插件