技术控

    今日:60| 主题:49101
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] 深入理解JavaScript中的this关键字

[复制链接]
小受你好萌 发表于 2016-10-10 10:00:55
75 0

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
this

  当函数创建后,this也被创建,它指向该函数所操作的对象。
  我们先来创建一个对象:
  1. var zhangsan = {
  2.   living:true,
  3.   age:23,
  4.   gender:'male',
  5.   getGender:function(){return zhangsan.gender;}
  6. };
  7. console.log(zhangsan.getGender()); //'male'
复制代码
注意在getGender方法中我们使用了zhangsan对象本身。它可以使用this来代替,因为this指向该函数所操作的对象,即zhangsan。
  this由上下文决定

  传递给函数的this的值是由函数被调用时的上下文决定的。
  下面例子中myObject的属性sayFoo指向了sayFoo函数。当在全局的作用域下调用sayFoo函数,this就为window对象。当它被myObject的方法调用时,this就为myObject。
  1. var foo = 'foo';
  2. var myObject = {foo: 'I am myObject.foo'};
  3. var sayFoo = function() {
  4.   console.log(this['foo']);
  5. };
  6. myObject.sayFoo = sayFoo;
  7. myObject.sayFoo(); // 'I am myObject.foo'
  8. sayFoo(); // 'foo'
复制代码
很显然this的值是基于函数调用时的上下文。
  嵌套函数中的this

  当this出现在嵌套函数中,它就会指向window对象,而不是该函数中的对象。
  1. var myObject = {
  2.   func1:function() {
  3.      console.log(this); //myObject
  4.      var func2=function() {
  5.         console.log(this); //window
  6.         var func3=function() {
  7.            console.log(this); //window
  8.         }();
  9.      }();
  10.   }
  11. };
  12. myObject.func1();
复制代码
该例中的func2和func3都是嵌套函数,所以this为window。
  下面的例子就很容易得出答案了~
  1. var foo = {
  2.   func1:function(bar){
  3.     bar(); //window
  4.     console.log(this);//foo object
  5.   }
  6. };
  7. foo.func1(function(){console.log(this)});
复制代码
如果我们不想this的值丢失,仍然指向该对象,一般我们会使用变量_this或that来存储this的值。如:
  1. var myObject = {
  2.   myProperty:'some',
  3.   myMethod:function() {
  4.    var that=this;
  5.    var helperFunction = function() {
  6.      console.log(that.myProperty); //'some'
  7.      console.log(this); //window
  8.     }();
  9.   }
  10. }
  11. myObject.myMethod();
复制代码
修改this的值

  this的值通常是由调用函数的上下文决定的,但是你可以通过apply()或者call()方法来重写它的值。即可以使用其它任意对象来调用一个函数。而这两个方法唯一不同之处就是参数传递方式不同,apply()方法传递参数数组,call()方法可以传递任意多个参数,下面举例说明:
  1. var myObject = {};
  2. var myFunction = function(param1, param2) {
  3.   this.foo = param1;
  4.   this.bar = param2;
  5.   console.log(this); //{foo = 'foo', bar = 'bar'}
  6. };
  7. myFunction.call(myObject, 'foo', 'bar'); // 将this设为myObject
  8. //myFunction.apply(myObject, ['foo', 'bar']);
  9. console.log(myObject);//foo = 'foo', bar = 'bar'}
复制代码
构造函数中的this

  当一个函数(构造函数)通过new关键字来调用,该函数中的this指向它的实例。
  1. var Person = function(name) {
  2.   this.name = name || 'zhangsan'; // this将指向具体的实例对象
  3. }
  4. var zhangsan = new Person('lisi'); //创建一个Person实例
  5. console.log(zhangsan.name);//'lisi'
复制代码
下面将调用方式改变下,不使用new:
  1. var Person = function(name) {
  2.   this.name=name||'zhangsan';
  3. }
  4. var lisi = Person('lisi'); //注意没有使用new
  5. console.log(lisi.name); //报错,因为zhangsan为undefined
  6. console.log(window.name);//'lisi'
复制代码
构造函数的原型方法中的this

  构造函数的原型方法中的this会指向调用该方法的实例对象:
  1. var Person = function(x){
  2.     if(x){this.fullName = x};
  3. };
  4. Person.prototype.getName = function() {
  5.     return this.fullName; //this为实例对象
  6. }
  7. var zhangsan = new Person('zhangsan');
  8. var lisi = new Person('lisi');
  9. console.log(zhangsan.getName(), lisi.getName());//zhangsan , lisi
  10. //如果该实例没有fullName属性,就会从原型链中查找
  11. Object.prototype.fullName = 'John';
  12. var john = new Person();
  13. console.log(john.getName());//John
复制代码
友荐云推荐




上一篇:让脚本说话"厉害了我的哥"
下一篇:在Swift语言中处理JSON - 转换JSON和Model
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表