JavaScript的this关键字的理解(2)

为了使this的值不丢失,你可以在父函数中使用一个作用域链(scope chain)来保存对this进行引用。下面的代码中,使用一个叫that的变量,利用它的作用域,我们可以更好的保存函数上下文。

<!DOCTYPE html><html lang="en"><body><script> 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 </script></body></html>

控制this的值

this的值通常取决于调用函数的上下文(除非使用关键字new,稍后会为你介绍),但是你可以用apply()或call()指定触发一个函数时this指向的对象,以改变/控制this的值。用这两种方法就好像再说:“嘿,调用X函数,但让Z对象来作this的值。”这样做,JavaScript默认的this的值将被更改。

下面,我们创建了一个对象和一个函数,然后我们通过call()来触发函数,所以函数中的this指向的是myOjbect。在myFunction函数中的this会操作myObject而不是head对象,这样我们就改变了在myFunction中this指向的对象。

<!DOCTYPE html><html lang="en"><body><script> 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'} </script></body></html>

在上面的例子,我们用了call(),apply()也可适用于同样用法,二者的不同之处在于参数如何传给函数。用call(),参数用逗号分开,而用apply(),参数放在一个数组中传递。下面是同样的代码,但是用apply()。

<!DOCTYPE html><html lang="en"><body><script> 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'} </script></body></html>

在自定义构造函数中用this

当函数用关键字new来触发,this的值–由于在构造函数中声明–指向实例本身。换种说法:在构造函数中,我们可以在对象真正创建之前,就用this来指定对象。这样看来,this值的更改和call()或apply()相似。

下面,我们构造了一个构造函数Person,this指向创建的对象。当Person的对象创建后,this指向这个对象,并将属性name放在对象内,值为传给这个构造函数的参数值(name)。

<!DOCTYPE html><html lang="en"><body><script> 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' </script></body></html>

这样,当用关键字new触发构造函数时,this指向“要创建的对象”。那么如果我们没有用关键字new,this的值将会指向触发Person的上下文——这时是head对象。让我们来看看下面的代码。

<!DOCTYPE html><html lang="en"><body><script> 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' </script></body></html>

在prototype方法内的this指向构造实例

当一个方法作为一个构造函数的prototype属性时,这个方法中的this指向触发方法的实例。这里,我们有一个Person()的构造函数,它需要person的全名(full name),为了获得全名(full name),我们在Person.prototype中加入了一个whatIsMyFullName方法,所有的Person实例都继承该方法。这个方法中的this指向触发这个方法的实例(以及它的属性)。

下面我创建了两个Person对象(cody和lisa),继承的whatIsMyFullName方法包含的this就指向这个实例。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzsfdf.html