Just Sword Wang's Blog

uedbet手机官网下载-uedbet手机app下载

这是一篇译文。当时看到原文的时候觉得内容非常易懂,是不可多得的好文。所以一开始就扔进草稿箱准备翻译,不过一晃好久过去了,最新发布的博文ID是1190,而这篇的ID是715,可见其在草稿箱里待了有多久。而这期间网络上也已经有了这篇文章的翻译稿,不过传播并不广泛,我搜索了下并没有多少索引和转发量。总体来说,已有的翻译稿总体来说也挺好,但是但从第二节开始,翻译变的有些随意,并且出现了很多偏差,有大有小,虽不影响阅读却多少妨碍理解。比如将“传递函数作为值”译成“传递函数的值”等等,这很容易引起混淆。另外还遗漏了一小部分内容的翻译,不知道是否是原作者后期更新内容所致。

个人挺喜欢这篇文章,所以网上虽已有一版,但还是希望用自己的翻译语言来描述一遍。尽管可能显得多余,但我对自己的翻译水平还是有些自信,特别是斟词酌句的时候特别爱花时间。如果要说特点就是,尽可能保持原来作者的语句不改动。不到万不得已不分句,所以语言上难免定语比较多,读起来可能有些拗口。不过好处就是很少出现意思的偏差,同时尽可能不修改也是对原作者的尊重。

原文Fully Understanding the this Keyword by Cody Lindley

this的概念性概述

每当一个函数被创建,一个叫做this的关键字(在幕后)也随之被创建出来,它链接着包含函数进行操作的对象。换句话说,this在其所在函数的作用域里可用,是包含那个函数作为属性和方法的对象的引用。

让我们来看看这个对象:

var cody = {
	living:true,
	age:23,
	gender:'male',
	getGender:function(){return cody.gender;} 
};

console.log(cody.getGender()); // logs 'male'

注意里面的getGender函数,我们通过点符号(例如cody.gender)访问cody对象自身的gender属性。这段代码可以被重写,用this来访问cody对象,因为this指向cody对象。

var cody = {
	living:true,
	age:23,
	gender:'male',
	getGender:function(){return this.gender;} 
};
 
console.log(cody.getGender()); // logs 'male'

this.gender里用到的this简单地指向函数正在操作的cody对象。

关于this的主题会让人感到困惑,但其实未必如此。只要记住,通常,this被用在函数里并指向包含这个函数的对象,而不是这个函数本身(例外情况包括使用new关键字或者call()apply())。

注意事项

  • 关键字this的行为看起来就像其他变量一样,除了你不能改变它。
  • 不同于arguments和任何发送给函数的参数,在调用(活动)的对象中,this是一个关键字(而不是属性)。
  • 如何确定this的值?

    传递给所有函数的this,其值基于函数被调用的运行时的上下文。请注意下这里,因为这是“那些你需要去记下来的怪异(不同寻常)”之一。

    下面的代码里,myObject对象被赋予有一个sayFoo属性,其指向sayFoo函数。当sayFoo函数在全局作用域被调用时,this指向window对象。当它作为myObject对象的方法被调用时,this指向myObject

    myObject还有一个foo属性,这里被一同用到。

    var foo = 'foo';
    var myObject = {foo: 'I am myObject.foo'};
     
    var sayFoo = function() {
      console.log(this['foo']); 
    };
     
    // give myObject a sayFoo property and have it point to sayFoo function
    myObject.sayFoo = sayFoo;
    myObject.sayFoo(); // logs 'I am myObject.foo' 12
     
    sayFoo(); // logs 'foo'
    

    显然,this的值基于函数被调用的上下文。myObject.sayFoosayFoo都指向相同的函数。然而,根据sayFoo()从哪里(即:上下文)被调用,this的值不同。

    下面是显式使用全局对象(即window)的相同的代码,或许有用吧。(译注:原文使用 head object 一词,是原作者所著书《JavaScript Enlightenment》里的用语,并不详见于其他地方,其意与全局变量 global object 完全相同。下面的翻译将所有的 head object 译为全局对象)

    window.foo = 'foo';
    window.myObject = {foo: 'I am myObject.foo'};
    window.sayFoo = function() { ! console.log(this.foo); };
    window.myObject.sayFoo = window.sayFoo;
    window.myObject.sayFoo();
    window.sayFoo();
    

    确保你在传递函数时,或者有多个引用指向一个函数时,你明白this的值会随着你调用函数的上下文的不同而改变。

    注意事项

  • 除了this以外的所有变量以及参数都遵循词法作用域(Lexical Scoping)
  • 嵌套函数里的this指向全局对象

    你也许想知道,当this用在被另一个函数包含的函数里会发生什么。糟糕的是在ECMA 3里,this迷失了方向并指向了全局对象(浏览器的window对象),而不是包含函数定义的对象。

    下面的代码中,在func2func3中的this迷失了方向,不是指向myObject,而是指向了全局对象。

    var myObject = {
      func1:function() {
         console.log(this); //logs myObject
         varfunc2=function() {
            console.log(this); //logs window, and will do so from this point on 
            varfunc3=function() {
               console.log(this); //logs window, as it’s the head object
            }();
         }();
      }
    };
     
    myObject.func1();
    

    好消息是这将会在ECMAScript 5里被修正。现在,你必须意识到这个困境,特别是当你开始将函数作为值传递给其他函数时。

    考虑下面的代码,当将一个匿名函数传递到foo.func1时发生了什么。当一个匿名函数在foo.func1的内部调用(函数嵌套在函数中),这个匿名函数中的this的值将会指向全局对象。

    var foo = {
      func1:function(bar){
        bar(); //logs window, not foo
        console.log(this);//the this keyword here will be a reference to foo object
      }
    };
     
    foo.func1(function(){console.log(this)});
    

    现在你应该不会忘记了:当包含this的函数嵌套在另一个函数中,或者在另一个函数的上下文中被调用时,this的值将总是指向全局对象(再说一次,这将会在ECMAScript 5里被修正)。

    解决嵌套函数的问题

    为了this的值不丢失,你可以简单地在父函数里使用作用域链来保存this的引用。下面的代码演示了怎么做,用一个叫做that的变量,并利用它的作用域,我们能更好保存上下文的轨迹。

    var myObject = {
      myProperty:'Icanseethelight', 
        myMethod:function() {
       var that=this; //store a reference to this (i.e.myObject) in myMethod scope varhelperFunctionfunction(){//childfunction
       var helperFunction function() { //childfunction
          //logs 'I can see the light' via scope chain because that=this
               console.log(that.myProperty); //logs 'I can see the light'
               console.log(this); // logs window object, if we don't use "that"
            }();
        }
    }
     
    myObject.myMethod(); // invoke myMethod
    

    控制this的值

    this的值通常取决于函数被调用处的上下文(除了使用new关键字的情况以外,这方面稍后讨论),但是你可以使用apply()call()来定义调用函数时this指向的对象,以此覆盖/控制this的值。使用这些方法,就好像再说:“嘿,调用 X 函数,但是告诉它,用 Z 对象作为this的值”。这么做的话,JavaScript默认决定this值的方式就被覆盖了。

    下面,我们创建了一个对象和一个函数。然后我们通过call()调用函数,以便让函数中this的值使用myObject作为其上下文。于是myFunction函数里的语句就会去填充myObject的属性而不是填充全局对象。我们就改变了(myFunction中的)this所指向的对象

    var myObject = {};
     
    var myFunction = function(param1, param2) {
      //setviacall()'this'points to my Object when function is invoked
      this.foo = param1;
      this.bar = param2;
      console.log(this); //logs Object{foo = 'foo', bar = 'bar'}
    };
     
    myFunction.call(myObject, 'foo', 'bar'); // invoke function, set this value to myObject
     
    console.log(myObject) // logs Object {foo = 'foo', bar = 'bar'}
    

    在上面的例子里,我们使用了call(),但也可以使用apply()。两者的不同之处在于如何将参数传递给函数。使用call(),参数仅使用逗号分隔。使用apply(),参数放在一个数组里传递。下面是相同的思路,但使用的是apply()

    var myObject = {};
     
    var myFunction = function(param1, param2) {
      //set via apply(), this points to my Object when function is invoked 
      this.foo=param1;
      this.bar=param2;
      console.log(this); // logs Object{foo='foo', bar='bar'}
    };
     
    myFunction.apply(myObject, ['foo', 'bar']); // invoke function, set this value
    console.log(myObject); // logs Object {foo = 'foo', bar = 'bar'}
    

    这里你需要记住的是,你可以覆盖在一个函数作用域里JavaScript默认决定this值的方式。

    在自定义构造函数中使用this关键字

    当一个函数联合new关键字一起被调用时,this的值——就如同其在构造函数中的表示——指向对象实例本身。换种说法:在构造函数里,我们可以在对象被实际创建之前就通过this指代(控制)对象。这种情况下,this默认值的变化,与使用call()apply()并没有什么不同。

    下面,我们设置了一个Person的构造函数,并用this来指向将要被创建的对象。当Person的实例被创建,this.name将会指向新创建的对象,并用传递给构造函数的参数(name)的值,给新对象里的name属性赋值。

    var Person = function(name) {
      this.name = name || 'johndoe'; // this will refer to the instanc ecreated 
    }
     
    var cody = new Person('Cody Lindley'); // create an instance, based on Person constructor
     
    console.log(cody.name); // logs 'Cody Lindley'
    

    当使用new关键字调用构造函数时this指向“即将被创建的对象”。如果我们没有使用new关键字,那么this的值将会是Person被调用的上下文——这里就是全局对象。让我们检验下这个脚本。

    var Person = function(name) {
      this.name=name||'johndoe'; 
    }
     
    var cody = Person('Cody Lindley'); // notice we did not use 'new'
    console.log(cody.name); // undefined, the value is actually set at window.name
    console.log(window.name); // logs 'Cody Lindley'
    

    prototype方法中的this指向一个构造实例

    当函数被添加为构造函数的prototype属性时,这个函数里的this指向调用这个函数的实例。假设我们有一个自定义的Person()的构造函数,其需要人的全名(full name)作为参数。为了访问人的全名,我们将whatIsMyFullName方法添加到Person.prototype,这样,所有的的Person实例都继承了这个方法。当使用this时,这个方法就可以引用调用它的实例(以及这个实例的属性)。

    这里我演示了两个Person对象的创建(codylisa),以及继承来的包含this关键字的whatIsMyFullName方法如何访问实例。

    var Person = function(x){
        if(x){this.fullName = x};
    };
     
    Person.prototype.whatIsMyFullName = function() {
        return this.fullName; // 'this' refers to the instance created from Person()
    }
     
    var cody = new Person('cody lindley');
    var lisa = new Person('lisa lindley');
     
    // call the inherited whatIsMyFullName method, which uses this to refer to the instance
    console.log(cody.whatIsMyFullName(), lisa.whatIsMyFullName());
     
    /* The prototype chain is still in effect, so if the instance does not have a 
    fullName property, it will look for it in the prototype chain. 
    Below, we add a fullName property to both the Person prototype and the Object 
    prototype. See notes. */
     
    Object.prototype.fullName = 'John Doe';
    var john = new Person(); // no argument is passed so fullName is not added to instance
    console.log(john.whatIsMyFullName()); // logs 'John Doe'
    

    这里需要记住的是,当this关键字用在prototype对象的方法里时,其就指向实例。如果实例不包含那个属性,就开始原型查找(搜索查找原型链)。

    注意事项

    如果this所指向的实例或对象不包含被引用到的属性,那么这里适用任何原型查找都要使用的相同法则,沿着原型链(prototype chain)查找属性。所以在我们的例子里,如果我们的实例中不包含fullName属性,那么就会沿原型链查找fullName,先查找Person.prototype.fullName,然后是Object.prototype.fullName

    译后语

    相当花时间,不过,值得~

    BGM @ John Adorney - Beckoning


    评论加载中...

    Disqus提供评论支持,如果评论长时间未加载,请飞跃长城。