关于this对象的一个易错点

tips:接下去会在github写博客,简书不再更新和修改文章,欢迎大家逛逛我的新博客点击查看 ,我会尽量用更容易理解的方式写好每一篇博客,大家一起学习交流😄。

先给一个例子

var name = "The Window"
var object = {
    name : "My Object",
    
    f1 : function(){
       return function(){
           return this.name;
        };
    }
 };

  alert(object.f1()());  
       

这个例子返回的字符串是 "The Window",为啥不是"My Object"呢?

  • 原因是每个函数在被调用时, 其活动对象都会自动取得两个特殊变量:thisarguments</strong>。内部函数在搜索这两个变最时, 只会搜索到其活动对象为止,因此永远不可能直接访问外部函数中的这两个变量。
  • 也就是说要想让闭包【return function(){}】访问到外部函数【f1 :function(){}】里的this(或者arguments)变量,就要先将其赋值给到一个闭包能够访问到的变量里,如var that = this,这样就可以了。

修改后的例子如下

var name = "The Window"
var object = {
    name : "My Object",
    
    f1 : function(){
       var that = this; //添加这行
       return function(){
           return this.name;
        };
    }
 };

  alert(object.f1()()); 

返回"My Object"

另外一个例子

var name = "The Window•;
var object = {
    name : "My Object";
    getName: function() {
         return this.name;
    }
 };

上一个例子中的
return function(){
return this.name;
}
被换掉了,不再是闭包

object.getName(); //'My Object'
(object.getName)(); //'My Object"
(object.getName = object.getNamel (); //"The Window•, 在非严格模式下

第一行代码跟平常一样词用了object.getName (), 返回的是飞y Object", 因为this.name就是object.name。

第二行代码在调用这个方法前先给它加上了括号。虽然加上括号之后, 就好􀉀只是在引用一个函数, 但this的值得到了维持, 因为objec七.getName 和(object.getName)的定义是相同的。

第三行代码先执行了一条赋值语句,然后再诮用赋值后的结果。因为这个赋值表达式的值是函数本身, 所以this的值不能得到维持, 结果就返回了崎The Window飞

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 三、闭包和高阶函数 3.1 闭包 3.1.1 变量的作用域 所谓变量的作用域,就是变量的有效范围。通过作用域的划分...
    梁同学de自言自语阅读 1,494评论 0 6
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,842评论 2 17
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,767评论 18 399
  • 你身边有没有那种好像不是太讨人喜欢的小姑娘,在集体活动的时候,会被孤立,在生活中,也会被有意无意的排挤? 谁都知道...
    花是阅读 355评论 0 5
  • 懒散的在日头的阴影里 看街上人群骚动 目光涣散也是一种美 跳跃的是别人的身影 请闭上眼看我跳舞 牵我的手雀跃雀跃 ...
    江小瑛阅读 340评论 1 4