js中this的理解
平常用this很多,对this的理解就是this是对应执行环境,然而很多时候效果并不是想要的,最近看了一些谈到this的笔记和书籍,总结下。
对this的误解:
this是指向函数本身
先上个demo吧
1 var a =0;
demo.a=2;
function demo(){
console.log('ok');
this.a++
}
demo();//ok
console.log(demo.a);//2
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,而是赋给一个变量,还能达到我们想要的效果吗?
var a =0
var obj1={
a:2,
demo:demo
};
var obj={
a:1,
obj1:obj1
};
function demo(){
console.log(this.a)
}
obj.obj1.demo(); //
var fn= obj.obj1.demo;
fn(); //0
obj.dd = obj.obj1.demo;
obj.dd() //
当我把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吧
var obj1={
a:2,
demo:demo
};
var obj={
a:1,
obj1:obj1
};
function demo(){
console.log(this.a)
}
obj.obj1.demo(); //2
obj.obj1.demo.call(obj); //1
var fn= obj.obj1.demo.bind(obj);
fn() //1
简单介绍下apply call bind。apply和call是函数内置的方法,第一个参数是指定函数执行环境,第二个参数是传给函数的参数,call是将参数依次传给函数,apply则是将参数组合在一个数组中,将数组传给函数,
bind也是绑定指定执行环境,但是不会执行(使用call和apply的时,函数就执行了)
根据上面说的,正常obj.obj1.demo()得到的结果是2,但是使用call后this绑定的obj上,所以a的值为1.后面使用bind同理(只是函数没有执行,需要执行一次)
4.构造函数模式
创建一个构造函数的实例,构造函数中的this会绑定到这个实例对象上
function Per(){
this.a=1
}
var dd = new Per();
alert(dd.a) //
dd是Per的一个实例,this绑定在dd上,创建了dd的一个属性a,且值为1
本文总结来源于《你不知道的JavaScript》
第一次写博客,排版有点乱,都是一些个人理解,有问题欢迎拍砖。
补充:setTimeout中如果使用this会直接指向window对象,使用闭包调用函数中有this,也是指向window(不确定,写的几个demo显示是如此)
js中this的理解的更多相关文章
- 关于js中闭包的理解
1.以前很不理解js中闭包的概念及使用,下面来看一下 function foo() { var a = 123; var b = 456; return function () { return a; ...
- js中的闭包理解一
闭包是一个比较抽象的概念,尤其是对js新手来说.书上的解释实在是比较晦涩,对我来说也是一样. 但是他也是js能力提升中无法绕过的一环,几乎每次面试必问的问题,因为在回答的时候.你的答案的深度,对术语的 ...
- JS中&&和||的理解
运算符可以从三个不同的层次进行理解. 第一层理解 当操作数都是布尔值时,"&&"对两个值执行布尔与(AND)操作. 复制代码代码如下: x==0 && ...
- js中的闭包理解
闭包是一个比较抽象的概念,尤其是对js新手来说.书上的解释实在是比较晦涩,对我来说也是一样. 但是他也是js能力提升中无法绕过的一环,几乎每次面试必问的问题,因为在回答的时候.你的答案的深度,对术语的 ...
- 对JS中函数的理解
函数本质就是功能的集合 JS中函数是对象,因此,函数名实际上仅仅是一个指向函数对象的指针,不会与某个函数绑定,所以,JS中没有重载(重载就是通过传递不同类型的参数,使两个相同函数名的函数执行不同的功能 ...
- 浅谈js中继承的理解和实现
一.前言 java.C#等正统面向对象语言都会提供类似extend之类的处理类的继承的方法,而javascript并没有提供专门的方法用于继承,在javascript中使用继承需要一点技巧.js中实例 ...
- js中对象的理解
JS中对象是可变的控件集合,对象的内容是可以更改的,可以为它添加任意属性或删除,而基本数据类型虽然拥有方法,但它们的值是不可变的,之所以它们拥有方法,是因为当它们调用方法是,后台会自动创建一个相映包装 ...
- 关于vue.js中slot的理解
slot这块看官网文档,起初有点不懂,仔细研究还是最终理解了,slot是用来干嘛的呢,先看下一个例子: <script src="https://unpkg.com/vue/dist/ ...
- [学习笔记]JS中闭包的理解
一.闭包概念的理解 闭包,又称为词法闭包或函数闭包指引用了自由变量的函数.这个被引用的自由变量将和这个函数一同存在,即使已经离开了创造它的环境也不例外. 自由变量:该变量既不是函数本身定义的也不是函数 ...
随机推荐
- Android 模拟器 获得 root权限
启动一个模拟器,开始-运行-输入cmd,打开dos,依次输入 adb shell mount -o remount,rw -t yaffs2 /dev/block/mtdblock3 /system ...
- EDM备忘录:触发式邮件订阅和退订功能介绍
一般来说,有触发式邮件订阅和退订功能是邮件模板设计中必不可少的两项功能,下面博主为大家介绍一下. 若客户在订阅后不想再收到这类邮件即可选择退订,将不再收到该IP地址的推广邮件,避免客户在继续收到这类邮 ...
- react-native Unrecognized font family ‘Lonicons’;
在使用:react-native-vector-icons库时报的错. 解决办法:使用这个库时android和ios工程目录中需要做些配置 配制方法如下: http://www.cnblogs.com ...
- 【转】ContextMenuStrip菜单应用
测试可用的代码: #region 右键快捷菜单单击事件 private void contextMenuStrip1_ItemClick(object sender, EventArgs e) { T ...
- Second Level Cache for Entity Framework 6.1
Second Level Cache for Entity Framework 6.1 Entity Framework does not currently support caching of q ...
- 自己动手搭建 CAS(Central Authentication Service) 环境,为了单点登录(Single Sign On , 简称 SSO )
介绍 刚刚搭建 CAS 成功了,现在记录下来,怕以后忘记,同时也给需要帮助的人.CAS 搭建需要服务端和客户端,服务端是 Java 写的,如果自己搭建则需要安装与配置 Java 环境.客户端可以是多种 ...
- ListView不规律刷新多次,重复执行getView
写ListView的时候,有时会发现ListView中的getView执行多次,有的时候又不是,搞了半天才找到原因,在http://blog.csdn.net/danielinbiti/article ...
- 后端码农谈前端(HTML篇)第三课:常见属性
一.HTML全局属性 1.核心属性 属性 描述 id 设置元素的唯一 id. class 设置元素的一个或多个类名(引用样式表中的类). style 设置元素的行内样式(CSS内联样式). title ...
- Linux文件查找工具之find “大宝剑”--转载
原文地址:http://xinzong.blog.51cto.com/10018904/1749465 一.文件查找工具常用软件 locate: locate命令其实是find -name的另一种写法 ...
- Java sun.misc.Unsafe类的学习笔记
Java未开源的Unsafe类 Unsafe类可以为我们提供高效并且线程安全方式操作变量,直接和内存数据打交道. 获取Unsafe实体的方法 private static Unsafe getUnsa ...