深切javascript——无处不在的this

有人的处所就有江湖,有函数的处所就有this。而this在差别的环境下,又表现为差别的情势,不免让人有种此this非彼this的疑惑

在java等面向对象的语言中,this指的就是当前对象,而在javascript中这就不灵了,javascript中this是在编译期动态绑定的,这就形成了一把双刃剑:充足天真却又轻易让人疑惑。在javascript中this可所以全局对象、当前对象以至恣意对象(obj.call(this))。
我们经由过程函数的几种差别挪用体式格局来看一下各自this的意义:

作为对象要领挪用

在javascript中函数也是个对象,因而,函数能够作为一个对象的属性涌现:

 var object = {
    name:"jeffie",
    sayWhat:function(){
        console.log(this.name + ":hello"); //jeffie:hello
    }
 }
object.sayWhat();

此处的this指向object对象,也就是函数地点的对象。

作为函数挪用

当函数直接被挪用时,此时函数中的this指向全局变量,也就是window对象:

 function obj(){
    console.log(this);
 }
obj();//Window

组织函数中的this

在作为组织函数挪用时,this指向的是新天生的实例对象:

 function Plugin(name,type){
    this.name = name;
    this.type = type;
 }

 var plugin = new Plugin("core",1);
 console.log(plugin.name);//core

运用apply或许call挪用

javascript中每一个函数都包括两个要领:apply()和call(),这两个要领异常壮大,它们能够切换函数的上下文实行环境,也就是说能够修正this绑定的对象。简朴来讲,这两个要领能够用来设置函数的this,两个要领都吸收两个参数,第一个参数是运转函数的作用域,第二个参数是参数对象,唯一的区别是apply第二个参数为参数数组(Array或许arguments):

 function Plugin(name,type){
    this.name = name;
    this.type = type;
    this.debugs = function(name,type){
        console.log(this); //Object {name: "base", type: 3} 
    }
 }

 var plugin1 = new Plugin("core",1);
 var plugin2 = {name:"base",type:3};
 console.log(plugin1.debugs.call(plugin2));

经由过程上面的示例能够看出this值不再指向Plugin对象了,而是指向了plugin2的对象。

闭包中运用this

平常我们明白this对象是运转时基于函数绑定的,全局函数中this对象就是window对象,而当函数作为对象中的一个要领挪用时,this即是这个对象。因为匿名函数的作用域是全局性的,因而闭包的this平常指向全局对象window:

var scope = "global";
var object = {
    scope:"local",
    getScope:function(){
        return function(){
            return this.scope;
        }
    }
}

挪用object.getScope()()返回值为global而不是我们预期的local,在闭包中函数作为某个对象的要领挪用时,要特别注意,该要领内部匿名函数的this指向的是全局变量。参考上一篇闭包
这属于 JavaScript 的设想缺点,准确的设想体式格局是内部函数的 this 应当绑定到其外层函数对应的对象上,为了躲避这一设想缺点,智慧的 JavaScript 程序员想出了变量替换的要领,只需要把外部函数作用域的this存放到一个闭包能接见的变量内里即可,约定俗成,该变量平常被命名为 that:

var scope = "global";
var object = {
    scope:"local",
    getScope:function(){
        var that = this;
        return function(){
            return that.scope;
        }
    }
}
object.getScope()()返回值为local。
    原文作者:缪斯的情人
    原文地址: https://segmentfault.com/a/1190000000655792
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞