this

总结:fn.call(thisarg,arg);

闭包下的this对象 高级程序书第182

var name = "the window";
var object = {
    name:"gejin",
    getNamefunction:function(){  //匿名函数1
        alert(this.name)  //gejin
        return function(){  //匿名函数2
            alert(this.name)    //the window   原因:object.getNamefunction()();调用匿名函数2时,2函数会自动取得this和arguments两个特殊变量,
            //2内部函数在搜索这两个变量时,只会搜索到其活动对象(我的理解是包括函数内部的变量和arguments),不能直接访问外部函数1的this和arguments
            //所以这里的this是window
            return this.name;
        }
    }
}
object.getNamefunction()();*/


/*var name = "the window";
var object = {
    name:"gejin",
    getNamefunction:function(){  //匿名函数1
        alert(this.name)  //gejin
        var that = this;
        return function(){  //匿名函数2
            alert(that.name);  //gejin
            return that.name;
        }
    }
}
object.getNamefunction()();*/


var name = "the window";
var object = {
    name:"gejin",
    getName:function(){
        return this.name;
    }
}
alert(object.getName());   //gejin
(object.getName)();   //gejin
(object.getName = object.getName)();  //the window   这是一个赋值语句,赋值语句的返回值是等号右边的值,即(object.getName = object.getName)的返回值是object.getName
                                        //所以(object.getName = object.getName)的返回值就是object.getName指向的函数本身了,即function(){return this.name;}
                                    //所以(object.getName = object.getName)();等于function(){return this.name;}(),此段代码的调用者为 window, 所以 this 指向 window。

以下转载自:https://www.cnblogs.com/front-Thinking/p/4364337.html

1、this是啥?

  简言之,this是JavaScript语言中定义的众多关键字之一,它的特殊在于它自动定义于每一个函数域内,但是this倒地指引啥东西却让很多人张二摸不着头脑。这里我们留个小悬念,希望看完这篇文章了你能回答出来this到底指引个甚。

* * *

  2、this有啥用?

  那边观众又该问了,既然this这么难以理解,那么为个甚还要用它呢?我们来看个例子:

[![复制代码](http://upload-images.jianshu.io/upload_images/1229727-ebd6733a503d682d..gif?imageMogr2/auto-orient/strip)](javascript:void(0); "复制代码") 

 1 function identify() { 2     return this.name.toUpperCase();
 3 }
 4 function sayHello() { 5     var greeting = "Hello, I'm " + identify.call( this ); 6     console.log( greeting );
 7 }
 8 var person1= { 9     name: "Kyle"
10 }; 11 var person2= { 12     name: "Reader"
13 }; 14 identify.call( person1); // KYLE
15 identify.call( person2); // READER
16 sayHello.call( person1); // Hello, I'm KYLE
17 sayHello.call( person2); // Hello, I'm READER
[![复制代码](http://upload-images.jianshu.io/upload_images/1229727-3a3f85083f8c5cda..gif?imageMogr2/auto-orient/strip)](javascript:void(0); "复制代码")   这段代码很简单,我们定义了两个函数,分别为identify和sayHello。并且在不同的对象环境下执行了它们,达到了复用的效果,而不用为了在不同的对象环境下执行而必须针对不同的对象环境写对应的函数了。简言之,this给函数带来了复用。那边客官又问了,我不用this一样可以实现,如: [![复制代码](http://upload-images.jianshu.io/upload_images/1229727-7e9d817e7046ea8c..gif?imageMogr2/auto-orient/strip)](javascript:void(0); "复制代码")
 1 function identify(context) { 2     return context.name.toUpperCase(); 3 }
 4 function sayHello(context) { 5     var greeting = "Hello, I'm " + identify( context); 6     console.log( greeting );
 7 }
 8 var person1= { 9     name: "Kyle"
10 }; 11 var person2= { 12     name: "Reader"
13 }; 14 identify( person1); // KYLE
15 identify( person2); // READER
16 sayHello( person1); // Hello, I'm KYLE
17 sayHello( person2); // Hello, I'm READER
[![复制代码](http://upload-images.jianshu.io/upload_images/1229727-5d4d262543acfc85..gif?imageMogr2/auto-orient/strip)](javascript:void(0); "复制代码")   仔细一看,这位客官给出的解决方法的确也达到了类似的效果。赞一个!我想说的是,随着代码的增加,函数嵌套、各级调用等变得越来越复杂,那么传递一个对象的引用将变得越来越不明智,它会把你的代码弄得非常乱,甚至你自己都无法理解清楚。而this机制提供了一个更加优雅而灵便的方案,传递一个隐式的对象引用让代码变得更加简洁和复用。好了,知道了this的用处,那么再看看我们对它的误解。   3、关于this的误解 * * *   相信很多童鞋是学过其它语言的,在很多编程语言中都有this的机制,惯性思维把其它语言里对它的理解带到了JavaScript中。同时,由于this这个单词的理解导致了我们产生了对它各种各样的误解。所以,开始前,我们先澄清下对它的误解。   3.1 误解一:this引用function本身   我们都知道,在函数里引用函数可以达到递归和给函数属性赋值的效果。而这在很多应用场景下显得非常有用。所以,很多人都误以为this就是指引function本身。例如: [![复制代码](http://upload-images.jianshu.io/upload_images/1229727-0ff4dd15e4fa29b3..gif?imageMogr2/auto-orient/strip)](javascript:void(0); "复制代码")
 1 function fn(num) { 2     console.log( "fn: " + num ); 3     // count用于记录fn的被调用次数
 4     this.count++;
 5 }
 6 fn.count = 0;
 7 var i; 8 for (i=0; i<10; i++) {
 9     if (i > 5) { 10 fn( i ); 11 } 12 } 13 // fn: 6
14 // fn: 7
15 // fn: 8
16 // fn: 9
17 
18 console.log( fn.count ); // 0 -- 耶?咋不是4捏? 
[![复制代码](http://upload-images.jianshu.io/upload_images/1229727-ddf9b93cb6d3d381..gif?imageMogr2/auto-orient/strip)](javascript:void(0); "复制代码")   上面我们想要记录fn被调用的次数,可是明显fn被调用了四次但count仍然为0。咋回事捏?这里简单解释下,fn里第4行的自增隐式的创建了一个全局变量count,由于初始值为undefined,所以每一次自增其实依然不是一个数字,你在全局环境下打印count(window.count)输出的应该是NaN。而第6行定义的函数熟悉变量count依然没变,还是0。如果对这个执行结果不清楚的,欢迎去看我前些天的那篇博文(聊一下JS中的作用域scope和闭包closure scope和closure),在这里你只需要知道,this引用的是function这种理解是错误的就行。   这边就会又有人问了,既然this不是引用function,那么我要实现递归函数,该咋引用呢?这里简单回答下介个问题,两种方法:①函数体内用函数名来引用函数本身②函数体内使用arguments.callee来引用函数(不推荐)。那么既然第二种方法不推荐,匿名函数咋引用呢?用第一种,并且给匿名函数一个函数名即可(推荐)。   3.2 误解二:this引用的是function的词法作用域   这种误解欺骗的人可能更多一些。首先,澄清一下,this并没有引用function的词法作用域。的确JS的引擎内对词法作用域的实现的确像是一个对象,拥有属性和函数,但是这仅仅是JS引擎的一种实现,对代码来说是不可见的,也就是说词法作用域“对象”在JS代码中取不到。(关于词法作用域,如果不理解,可以参考之前的一篇博文《聊一下JS中的作用域scope和闭包closure scope和closure》)。看个错误的例子: [![复制代码](http://upload-images.jianshu.io/upload_images/1229727-9f127a0d63695433..gif?imageMogr2/auto-orient/strip)](javascript:void(0); "复制代码")
1 function fn1() { 2     var a = 2; 3     this.fn2();//以为this引用的是fn1的词法作用域 4 } 5 function fn2() { 6     console.log( this.a ); 7 } 8 fn1(); //ReferenceError
[![复制代码](http://upload-images.jianshu.io/upload_images/1229727-0418caf5c7481641..gif?imageMogr2/auto-orient/strip)](javascript:void(0); "复制代码")   上面的代码明显没有执行出想要的结果,从而可以看到this并没有引用函数的词法作用域。甚至,可以肯定的说,这个例子里fn2可以在fn1里正确执行都是偶然的(理解了词法作用域你就知道为什么这里执行不报错了)。 * * *   4、this到底跟啥有关?   好了,扯了那么多都没上干货,有的观众都开始关闭当前页开始离席了。这里,我们郑重声明:this跟函数在哪里定义没有半毛钱关系,函数在哪里调用才决定了this到底引用的是啥。也就是说this跟函数的定义没关系,跟函数的执行有大大的关系。所以,记住,“函数在哪里调用才决定了this到底引用的是啥”。 * * *   5、this机制的四种规则   this到底绑定或者引用的是哪个对象环境决定于函数被调用的地方。而函数的调用有不同的方式,在不同的方式中调用决定this引用的是哪个对象是由四种规则确定的。我们一个个来看。   5.1 默认绑定全局变量   这条规则是最常见的,也是默认的。当函数被单独定义和调用的时候,应用的规则就是绑定全局变量。如下: 
1 function fn() { 2     console.log( this.a ); 3 } 4 var a = 2; 5 fn(); // 2 -- fn单独调用,this引用window
  5.2 隐式绑定   隐式调用的意思是,函数调用时拥有一个上下文对象,就好像这个函数是属于该对象的一样。例如: [![复制代码](http://upload-images.jianshu.io/upload_images/1229727-55205bcda273a061..gif?imageMogr2/auto-orient/strip)](javascript:void(0); "复制代码")
1 function fn() { 2     console.log( this.a ); 3 } 4 var obj = { 5     a: 2, 6 fn: fn 7 }; 8 obj.fn(); // 2 -- this引用obj。
[![复制代码](http://upload-images.jianshu.io/upload_images/1229727-e1a56f8cbe2f5fe9..gif?imageMogr2/auto-orient/strip)](javascript:void(0); "复制代码")   需要说明的一点是,最后一个调用该函数的对象是传到函数的上下文对象(绕懵了)。如: [![复制代码](http://upload-images.jianshu.io/upload_images/1229727-97c64b1538787817..gif?imageMogr2/auto-orient/strip)](javascript:void(0); "复制代码")
 1 function fn() { 2     console.log( this.a );
 3 }
 4 var obj2 = { 5     a: 42,
 6     fn: fn
 7 };
 8 var obj1 = { 9     a: 2, 10 obj2: obj2 11 }; 12 obj1.obj2.fn(); // 42 -- this引用的是obj2.
[![复制代码](http://upload-images.jianshu.io/upload_images/1229727-c0f89bd49fe9c432..gif?imageMogr2/auto-orient/strip)](javascript:void(0); "复制代码")   还有一点要说明的是,失去隐式绑定的情况,如下: [![复制代码](http://upload-images.jianshu.io/upload_images/1229727-20d2fd276ca9d2e3..gif?imageMogr2/auto-orient/strip)](javascript:void(0); "复制代码")
 1 function fn() { 2     console.log( this.a );
 3 }
 4 var obj = { 5     a: 2,
 6     fn: fn
 7 };
 8 var bar = obj.fn; // 函数引用传递
 9 var a = "全局"; // 定义全局变量
10 bar(); // "全局"
[![复制代码](http://upload-images.jianshu.io/upload_images/1229727-9dcafbe69dca897c..gif?imageMogr2/auto-orient/strip)](javascript:void(0); "复制代码")   如上,第8行虽然有隐式绑定,但是它执行的效果明显是把fn赋给bar。这样bar执行的时候,依然是默认绑定全局变量,所以输出结果如上。  5.3 显示绑定   学过bind()\apply()\call()函数的都应该知道,它接收的第一个参数即是上下文对象并将其赋给this。看下面的例子: [![复制代码](http://upload-images.jianshu.io/upload_images/1229727-c4257763c96734a6..gif?imageMogr2/auto-orient/strip)](javascript:void(0); "复制代码")
1 function fn() { 2     console.log( this.a ); 3 } 4 var obj = { 5     a: 2
6 }; 7 fn.call( obj ); // 2
[![复制代码](http://upload-images.jianshu.io/upload_images/1229727-ca05b2043b32c252..gif?imageMogr2/auto-orient/strip)](javascript:void(0); "复制代码")   如果我们传递第一个值为简单值,那么后台会自动转换为对应的封装对象。如果传递为null,那么结果就是在绑定默认全局变量,如: [![复制代码](http://upload-images.jianshu.io/upload_images/1229727-001c200e28420986..gif?imageMogr2/auto-orient/strip)](javascript:void(0); "复制代码")
1 function fn() { 2      console.log( this.a ); 3 } 4  var obj = { 5      a: 2
6 }; 7 var a = 10; 8 fn.call( null); // 10
[![复制代码](http://upload-images.jianshu.io/upload_images/1229727-3adad42aeb6a00cf..gif?imageMogr2/auto-orient/strip)](javascript:void(0); "复制代码")   5.4 new新对象绑定   如果是一个构造函数,那么用new来调用,那么绑定的将是新创建的对象。如:
1 function fn(a) { 2     this.a = a; 3 } 4 var bar = new fn( 2 ); 5 console.log( bar.a );// 2
  注意,一般构造函数名首字母大写,这里没有大写的原因是想提醒读者,构造函数也是一般的函数而已。 * * *

6、结束语

读到现在,1中问的问题你该自己能回答上来了。上面介绍的四种关于this绑定的4中情况和规则,现实写代码的过程中肯定比这要多和复杂,但是无论多复杂多乱,它们都是混合应用上面的几个规则和情况而已。只要你的思路和理解是清晰的,那肯定没问题的。

7、匿名函数的环境通常具有全局性,this一般指向的是window

阮一峰:
function test(){
    console.log(this.x);
}
var obj = {};
obj.x = 1;
obj.m = test;
obj.m();   //1  方便理解,可以理解为obj对象调用m()函数,那么函数内的this指向的就是obj
函数还可以作为某个对象的方法调用,这时this就指这个上级对象

[图片上传失败...(image-edea3e-1541575684919)] 肖振华

成功只有一个——按照自己的方式,去度过人生。

[图片上传失败...(image-b51fe6-1541575684919)] [图片上传失败...(image-7ea01-1541575684919)] [图片上传失败...(image-f5157d-1541575684919)] [图片上传失败...(image-987a61-1541575684919)] 男 广东深圳 13691748312 [email protected] 太原理工大学(211) 本科 材料物理专业 22岁

求职意向

 前端工程师  广东深圳  薪资面议  两星期内到岗

掌握技能

工作经历

1、掌握Web前端开发基本技能,熟悉W3C标准,页面布局架构,html5、css3等

2、熟悉掌握原生JavaScript,熟练使用jQuery库

3、熟练使用Vue框架,并有个人项目经历

4、对性能优化、ES6等有一定的了解

5、熟练掌握svn、git版本管理工具

6、有简单原生app和h5混合开发经验

7、熟悉使用node.js/express搭建本地server连接mongodb数据库开发简单接口;

8、Blog: https://www.jianshu.com/u/8de85b3797ed https://blog.csdn.net/mozuncangtianbaxue

Github: https://github.com/gejinnvshen

2017.7-至今

项目经验

深圳妈妈资本有限公司工作时间:1.5年

前端开发工程师

[图片上传失败...(image-e03b8e-1541575684917)] [图片上传失败...(image-b0d589-1541575684917)]

项目一:优职贷

项目介绍:针对律师、医生等的特定用户开发的申请借款的H5项目,以及内嵌在app中项目职责:

1、负责页面布局、js交互,通过ajax等方式调用后台接口把数据渲染到页面

2、使用rem等方法对各浏览器、手机型号进行适配

3、通过js操作唤醒app或者打开商店,引导用户跳转下载app

4、协同客户端调用接口对用户进行人脸识别

项目地址:https://yzd.88mmmoney.com/gzdIndex.htm

[图片上传失败...(image-c78e0c-1541575684919)]

兴趣爱好 / 自我评价

项目二:****类似豆瓣评分H5

技术栈:vue2 + vuex + vue-router+flex

功能:注册登录登出 + 验证码 密码检测,如果用户不存在则自动创建

检测是否登录,如果没有登录则不允许评论和评价

上传头像,搜索功能,图片懒加载功能

搜索功能,可以搜索存在的影片,如果没有则显示无结果

项目三:简易的H5购物页面

项目介绍:类似于美团购物车,商品可以进行排序,修改选中物品数量,总价格改变, 页面之间的跳转、传参

项目职责:

1、使用vue-cli搭建好项目、安装好vue-router

2、编写好各个页面对应的组件,合理使用钩子函数,实现数据的监听、渲染页面、页面节点的实例化

3、通过vue-router实现组件之间显示的切换、参数传递项目地址:https://github.com/gejinnvshen/newShop

https://github.com/gejinnvshen/vue-router-project

兴趣爱好:篮球、阅读、健身

自我评价: 编程这份工作常给我这样的感受,很多看起来难以完成的需求,在经过一次又一次的分解、分析、搜索、论证后,最终总能找到解决方案。这时你回过

头来会发现,它也就那么回事。我想,程序如此,生活也如此。

你可能感兴趣的:(this)