this总结

this总结，mark一下：

Object中的this：

Object方法中的this，指向的就是该对象，即谁调用this就指向谁，与C#等服务器语言的思想比较一致。

 let

     demo = {

         name: "dqhan",

         action: function () {

             console.log(this); //{name: "dqhan", action: ƒ}

             (function () {

                 console.log(this);//Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

                 // "use strict";

                 // console.log(this);//undefined

             })();

         }

     };

 demo.action();

demo对象调用action，action中的this指向的就是demo，action内部的自执行函数this则指向的是window，严格模式下为undefined。可以写个深层次的demo来看下会不会影响this的指向

 let

     demo = {

         name: "dqhan",

         action: function () {

             console.log(this) //{name: "dqhan", action: ƒ, innerDemo: {…}}

         },

         innerDemo: {

             name: 'innerDqhan',

             action: function () {

                 console.log(this)//{name: "innerDqhan", action: ƒ}

             }

         }

     };

 demo.action();

 demo.innerDemo.action();

事实证明不会影响this的指向，这种方式的定义以及调用不参与原型链，不涉及this指向改变的问题。

函数中的this：

匿名函数中，函数体内的this指向为window，严格模式下为undefined。

 function demo(){

     console.log(this);//Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

     // "use strict"

     // console.log(this);//undefined

 }

 demo();

 foo = 'outer'

 function demo() {

     this.foo = 'inner';

     // "use strict";

     // this.foo = 'inner';//error

 }

 console.log(foo);//outer

 demo();

 console.log(foo);//inner

foo在不加var，let(ES6)下自动挂载window下，调用demo后在函数内部将foo重新赋值。严格开发下this为undefined报错。

构造函数中的this：

提到this常常想到的是构造函数，写个简单的demo如下

 function Demo() {

     this.name = "dqhan";

     this.action = function () {

         console.log(this)//Demo {name: "dqhan", action: ƒ}

     };

 };

 let

     demo = new Demo();

 demo.action();

 console.log(demo.name);//dqhan

调用demo内的action，action中的this指向构造函数的实例化对象，原因是什么呢？这里需要了解一下let demo = new demo();到底发生了什么。

 //action1

 let

     demo = new Demo();

 //action2

 let

     demo = {};

 demo.__proto__ = Demo.prototype;

 Demo.call(demo);

js中new一个实例化对象的过程等价于action2的代码，最后一步通过call方法（apply，bind）将demo对象中的this传递到了Demo构造函数中，从而将构造函数中没有定义在原型中的属性与方法都定义到了demo 对象中，这就是为什么构造函数中的this会是实例化对象的原因。另外我们可以将属性或者方法都定义在原型中

 function Demo() {

     this.name = "dqhan";

 };

 Demo.prototype.action = function () {

     console.log(this)//Demo {name: "dqhan", action: ƒ}

 };

 let

     demo = new Demo();

 console.log(demo.name);//dqhan

我们都清楚，构造函数类似于一个简单工厂模式，我们可以通过一个构造函数生成很多其他对象，我们将属性或者方法定义在原型中，这样可以达到原型共享的目的。

 function Demo() {

     this.name = "dqhan";

 };

 Demo.prototype.action = function () {

     console.log(this)//Demo {name: "dqhan", action: ƒ}

 };

 let

     demo = new Demo(),

     demo1 = new Demo(),

     demo2 = new Demo();

 demo.__proto__ === demo1.__proto__;//true

 demo1.__proto__ === demo2.__proto__;//true

当对象非常多的是时候，可以节约内存。

当函数内嵌套匿名函数

 function Demo() {

     this.name = "dqhan";

 };

 Demo.prototype.action = function () {

     console.log(this);//Demo {name: "dqhan", action: ƒ}

     (function () {

         console.log(this);//Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

         // "use strict";

         // console.log(this)//undefined

     })();

 };

 let

     demo = new Demo();

 demo.action();

定义在构造函数内的方法在传递的时候，实例化对象不会跟着一起传过去

 function Demo() {

     this.name = "dqhan";

 };

 Demo.prototype.action = function () {

     console.log(this);

 };

 function foo(method){

     method();

 };

 let

     demo = new Demo();

 foo(demo.action);//Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

 function Demo() {

     this.name = "dqhan";

 };

 Demo.prototype.action = function (method) {

     console.log(this);

     method();

 };

 Demo.prototype.actionCallBack = function () {

     console.log(this);

 }

 let

     demo = new Demo();

 demo.action(demo.actionCallBack);

 //Demo {name: "dqhan"}

 //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

这两种情况都是将实例化对象中的方法当成参数进行传递。但是在执行函数中，this的上下文已经发生改变。解决方式可以通过bind，apply，call等改变上下文的方式。

 function Demo() {

     this.name = "dqhan";

 };

 Demo.prototype.action = function (method) {

     console.log(this);

     method()

 };

 Demo.prototype.actionCallBack = function () {

     console.log(this);

 }

 let

     demo = new Demo();

 demo.action(demo.actionCallBack.bind(demo));

 // Demo {name: "dqhan"}

 // Demo {name: "dqhan"}

 function Demo() {

     this.name = "dqhan";

 };

 Demo.prototype.action = function () {

     console.log(this);

     (function () {

         console.log(this);

     }).apply(this);

 };

 let

     demo = new Demo();

 demo.action();

 // Demo {name: "dqhan"}

 // Demo {name: "dqhan"}

setTimeout中的延迟函数中this

 let

     obj = {

         timerAction: function () {

             console.log(this);

         }

     };

 function foo(method) {

     method();

 };

 obj.timerAction();

 foo(obj.timerAction);

 setTimeout(obj.timerAction, 0);

 // {timerAction: ƒ}

 // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

 // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

之前看过一篇关于setTimeout使用时延迟函数自动挂载window上。今天总结了一下，发现这种方式个人觉得可以理解成，以函数当做参数进行传递this都是传递不过去的。如果简单的写一个函数，那么问题就更不存在了，匿名函数本身就是挂载window下，没有争议了。

随机推荐

javascript 二维数组的例子
javascript没有二维数组.所有自定义了一个数组类,下面是实例代码. 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...
NSArray的排序方法
转自:http://blog.csdn.net/lixuwen521/article/details/7848893 1.sortedArrayUsingSelector (按Key值大小对NSDic ...
[leetcode] Longest Palindromic Substring 多种解法
非常经典的题目,求字符串中的最长回文子串. (1)最朴素的解法 ---暴力复杂度O(N³) 这也是最easy想到的方法.最外层循环枚举起点i,第二层循环从i+1開始向后枚举,第三层推断是不是回文串. ...
OOP KLASSOOP, instanceklass
http://rednaxelafx.iteye.com/blog/1847971 https://www.sczyh30.com/posts/Java/jvm-klass-oop/ OpenJDK9 ...
Cocos2d-x和时间有关的代码
用cocos2d-x获取系统时间,格式为年月日时分秒: void GetTime(float dt) { struct tm *tm; #if (CC_TARGET_PLATFORM == CC_PL ...
Python 按当前日期（年、月、日）创建多级目录的方法
先看实际效果,现在时间2018.4.26 使用python脚本按照年月日生成多级目录,创建的目录可以将系统生成的日志文件放入其中,方便查阅,代码如下: #!/usr/bin/env python #c ...
windows党码农在linux下你最需要的软件列表TOP10
NO 10.QQ 神奇的TX,经常更新接口,使得linux社区的模仿软件总是跟不上步伐,一整就不能登陆使用.可是老大,您怎么自从2009-01-04发布了第一版QQ for Linux 1.0 Bet ...
highcharts 动态生成x轴和折线图
highchart 动态生成x轴和折线图 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8&qu ...
spring报错：Caused by: java.lang.IllegalStateException: Cannot convert value of type for property : no matching editors or conversion strategy found
原因分析:是因为类返回的类型跟期望的类型没有继承关系,返回的类型就SqlMapClient,它是通过实现了FactoryBean<SqlMapClient>接口的SqlMapClientF ...
perl 计算方差中值平均数 Statistics::Descriptive;
http://search.cpan.org/~shlomif/Statistics-Descriptive-3.0612/lib/Statistics/Descriptive.pm use Stat ...

随机推荐

相关文章