js中this的理解

平常用this很多，对this的理解就是this是对应执行环境，然而很多时候效果并不是想要的，最近看了一些谈到this的笔记和书籍，总结下。

对this的误解：

this是指向函数本身

先上个demo吧

1　　　var a =0;
2     demo.a=2;
3     function demo(){
4         console.log('ok');
5         this.a++
6     }
7     demo();//ok
8     console.log(demo.a);//2
9     console.log(a); //1

上面的demo已经得知，如果this是指向函数本身，那么demo.a的值应该为3，但还是2说明调用的不是demo函数。

window对象的a却增加了，说明demo函数中的this是指向window（等会说为什么）

this是在调用时被绑定的，取决于函数的调用位置（也就是调用方法）：

1.默认绑定：

最常用也是函数调用类型，当只有一个独立函数时，this指向的是window对象（解释上面例子为什么console.log(a)会是1）。

注意：当使用严格模式，this会绑定到undefined

2.隐式绑定

函数调用的位置有上下文环境（我理解为对象调用模式，函数是一个对象的方法）

var obj1={    a:2,    demo:demo};var obj={    a:1,    obj1:obj1};function demo(){    console.log(this.a)}obj.obj1.demo()//2

当函数的执行环境是在obj对象，this指向的就是obj。如果被包裹了几层对象，this只会绑定最后一层对象(上面demo中this最后绑定到obj1上)

注意：1.有时我们不会写这么长一串obj.obj1.demo，而是赋给一个变量，还能达到我们想要的效果吗？

 1     var a =0
 2     var obj1={
 3         a:2,
 4         demo:demo
 5     };
 6     var obj={
 7         a:1,
 8         obj1:obj1
 9     };
10     function demo(){
11         console.log(this.a)
12     }
13     obj.obj1.demo(); //2
14     var fn= obj.obj1.demo;
15     fn(); //0
16     obj.dd = obj.obj1.demo;
17     obj.dd() //1

当我把obj.obj1.demo赋给fn时，再执行fn(),结果却是0.why？按照我们上面说的，fn()可以理解为一个独立函数（没有任何修饰符），其中的this就是指向window，即a=0。

我觉得还能这么理解，函数中this，取决于调用函数上一级（也就是上面说的最后一级）的对象。

如上：obj.dd = obj.obj1.demo，然后执行obj.dd（），结果是1，也就是说现在函数中你的this绑定的是obj对象。同理也可以解释fn()其实就是window.fn(),绑定的是window对象

3.显示绑定

显示绑定就是通过apply，call，bind，直接将函数中的this绑定到想要的对象上

还是先看demo吧

 1     var obj1={
 2         a:2,
 3         demo:demo
 4     };
 5     var obj={
 6         a:1,
 7         obj1:obj1
 8     };
 9     function demo(){
10         console.log(this.a)
11     }
12     obj.obj1.demo(); //2
13     obj.obj1.demo.call(obj); //1
14     var fn= obj.obj1.demo.bind(obj);
15     fn() //1

简单介绍下apply call bind。apply和call是函数内置的方法，第一个参数是指定函数执行环境，第二个参数是传给函数的参数，call是将参数依次传给函数，apply则是将参数组合在一个数组中，将数组传给函数，

bind也是绑定指定执行环境，但是不会执行（使用call和apply的时，函数就执行了）

根据上面说的，正常obj.obj1.demo()得到的结果是2，但是使用call后this绑定的obj上，所以a的值为1.后面使用bind同理（只是函数没有执行，需要执行一次）

4.构造函数模式

创建一个构造函数的实例，构造函数中的this会绑定到这个实例对象上

1     function Per(){
2        this.a=1
3     }
4     var dd = new Per();
5     alert(dd.a) //1

dd是Per的一个实例，this绑定在dd上，创建了dd的一个属性a，且值为1

本文总结来源于《你不知道的JavaScript》

第一次写博客，排版有点乱，都是一些个人理解，有问题欢迎拍砖。

补充：setTimeout中如果使用this会直接指向window对象，使用闭包调用函数中有this，也是指向window(不确定，写的几个demo显示是如此)

转载于:https://www.cnblogs.com/banzheshenghuo/p/5824334.html

js中this的理解相关推荐

JS中setter/getter理解
JS中setter/getter理解 JS对象属性 get/set和getter/setter 数据属性 Object.defineProperty() 访问器属性 getter/setter创建及删 ...
Javascript基础进阶(十六）JS中面向对象的理解、继承、封装、多态
小编推荐:Fundebug提供JS错误监控.微信小程序错误监控.微信小游戏错误监控,Node.j错误监控和Java错误监控.真的是一个很好用的错误监控费服务,众多大佬公司都在使用. 面向对象编程OOP ...
谈谈我对js中闭包的理解
闭包是一个能够访问其他函数作用域的函数. 很显然这样的定义晦涩难懂,很多人都很难理解闭包的真正含义那么我们就用通俗一点的语言来解析一下什么是闭包我在知乎上看到一个比较有意思的回答: 由此我们可以通 ...
JS中call用法理解
call()方法是借用构造函数来实现继承,即在子类型构造函数的内部调用超类型构造函数. 我理解的call()的作用就是改变上下文,即在以下代码中的 function subtype(){superTy ...
js中深浅拷贝理解与方法
深浅拷贝的方法堆栈理解基本数据类型 number.string.boolean.null.undefined 引用数据类型 object.function.array 栈内存存储基本数据类型内容 ...
js中call函数理解
一直以来,对call函数都不是很理解,经常看到用,有时候把,觉得挺好理解的,有时候吧,又觉得摸不清头脑,最近在看d3,里面又遇到call,所以,还是得把这个问题理解透彻.现在把我的理解记录如下: ca ...
JS中prototype的理解
1,JS是基于对象的语言,构造函数本身就是一个对象,当调用new关键字时,会创建一个新对象.2,prototype是对象的一个属性,其可以是一个基本类型,如数字.字符串等,也可以是一个引用类型. 3, ...
js中arguments的理解
一.在函数调用的时候,浏览器每次都会传递进来两个隐式参数 1.函数的上下文对象this 2.封装实参的对象arguments 二.arguments对象 1.arguments对象实际是所在函数的一个 ...
JS 中 TDZ 的理解
原文链接:https://acrens.github.io/2017/01/22/2017-01-22-TDZ/ 春节快到了,假期也快到了,空闲之余刷个微博,看见 @ruanyf 提出了一个问题与 T ...

js中this的理解

js中this的理解相关推荐

最新文章

热门文章