Javascript基础之-this
this应该算是前期比较容易混淆的一个关键字了,在这里,我就打算按照我的理解来说一下
首先呢,this的值是跟运行时被调用的位置相关的,而不是词法作用域。
也就是说,他的绑定的值很可能是动态的,不同的调用位置,很可能值就不一样,比如说:
function foo() { console.log(this.a); } var a = 2; var obj = { a: 3, foo, } foo(); //2 obj.foo(); //3 var c = obj.foo; c(); //2
然后你会惊讶的发现,foo()通过不同的形式调用,他最终的值是不一样的,咱们这一节主要就来讲一讲他们里面的这些绑定的规则
默认绑定
独立的函数调用,它的作用域是作用在全局的,这种绑定规则最常见并且是优先级最低的一种绑定规则。来一个例子
function foo() { console.log(this.a); //2 console.log(this === window); //true } var a = 2; foo();
在浏览器中执行,会发现,如果foo()作为一个函数单独调用,那么this指向的就是全局对象windows。
但是呢,也有一种例外,如果函数使用的严格模式的话,那么全局对象讲无法使用默认绑定,this将会绑定到undefined,还是刚才的例子:
function foo() { "use strict" console.log(this.a); console.log(this === window); } var a = 2; foo(); //Uncaught TypeError: Cannot read property 'a' of undefined
可以看到,foo直接抛出一个error,说this是undefined,取不到a,如果用到严格模式的时候,可以稍微注意下这个区别
咱们刚刚的例子,说的是函数内用严格模式的话,讲无法使用默认绑定,那么如果是在函数调用位置用严格模式,会受影响吗
function foo() { console.log(this.a); //2 console.log(this === window); //true } var a = 2; (function () { "use strict" foo(); })();
很明显,可以看出,是不受影响的,还有一个问题,如果把var定义变成let会怎么样呢
function foo() { console.log(this.a); //undefined console.log(this === window); //true } let a = 2; (function () { "use strict" foo(); })();
也就是说,let定义并不会加到全局变量中,这个和var的区别需要稍微留意一下
隐式绑定
这一条规则考虑的是是否有上下文对象,举个例子
function foo() { console.log(this.a); //2 console.log(this === obj); // true } var obj = { a: 2, foo, } obj.foo();
在这种情况下,foo会使用obj的上下文对象来引用函数,此时的this指向的就是obj。
那么如果是嵌套对象这种的,会怎么处理呢?
function foo() { console.log(this.a); // 1 console.log(this === obj) // true console.log(this === obj1) // fale } var obj = { a: 1, foo, }; var obj1 = { a: 2, obj, } obj1.obj.foo();
可以看到,实际上此时foo中的this指向了离他最近的对象obj,也就是说,对象属性引用链的最后一层会影响它的调用位置
还有一种情况。
function foo() { console.log(this.a); } var obj = { a: 3, foo, } var a = 2; var f = obj.foo; f(); // 2
这种情况下,虽然f是obj.foo的引用,但是最后依然用的是默认绑定,而不是隐式绑定,所以说呢,咱们可以这么理解,虽然他是对象中函数的引用,但是在执行的时候,调用的方式确是函数调用的方式,不是对象.属性()的方式,这块在使用的时候需要注意一下
显式绑定
很简单,显式绑定就是手动直接改变其this指向的一种方式,这个主要是用几种api来实现的
function foo() { console.log(this.a); } var obj = { a: 2, }; foo.call(obj); foo.apply(obj); var f = foo.bind(obj); f();
这个就是显式绑定的常见的三种形式
这三种形式的话,call和apply差不多,就不展开了,详情看文档就行,咱们仔细看一下bind函数,来在看一个例子
function foo(num1, num2) { console.log(num1 + num2); //5 console.log(this === obj); // true } var obj = { a: 1, }; var f = foo.bind(obj, 2); f(3);
这个可以看出,bind的用法和call以及apply还是有一些差别的。
注意,如果显式绑定传入的是null或者是undefined的话,将会使用默认绑定规则,举个例子
function foo() { console.log( this.a ); } var a = 2; foo.call( null ); // 2
new绑定
这个主要是new 函数()的绑定形式的,这个的this指向的是函数构造出的那个对象,new的时候,它的执行过程可以大概执行以下几步
创建一个全新的对象
这个新对象会被执行prototype连接
新对象绑定到函数调用的this
如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象
注意最后一句话,如果函数没有返回对象,那么就会返回函数调用的新对象,如果返回了一个对象呢,那么结果就是直接返回这个对象
var abc = { a: 10 } function foo() { return abc; } foo.prototype = { b: 20 }; var a = new foo(); console.log(a === abc); // true console.log(a.b); // undefined function bar() { this.a = 10; } bar.prototype = { b: 20 }; var b = new bar(); console.log(b.a); // 10 console.log(b.b); // 20
以上四种常见的this绑定方式已经介绍的差不多了,那么问题来了,谁的优先级更高呢
很明显,默认绑定的优先级最低,就不展开说了
显式绑定与隐式绑定哪个优先级高呢,举个例子
function foo() { console.log( this. a ); } var obj1 = { a: 2, foo: foo }; var obj2 = { a: 3, foo: foo }; obj1.foo(); // 2 obj2.foo(); // 3 obj1.foo.call( obj2 ); // 3 obj2.foo.call( obj1 ); // 2
很明显,显式绑定优先级要高于隐式绑定
那么new绑定和显式绑定谁更高呢,来再看个例子
function foo(something) { this.a = something; } var obj1 = {}; var bar = foo.bind( obj1 ); bar( 2 ); console.log( obj1.a ); // 2 var baz = new bar(3); console.log( obj1.a ); // 2 console.log( baz.a ); // 3
很明显,new的优先级会更高
所以,这样的话,优先级排序就出来了,分别为
new绑定 > 显式绑定 > 隐式绑定 > 默认绑定
以上就是大家常用到的几种,不过es6出现了一种箭头函数,箭头函数理论上不能应用上面四种的任意一种,它的this是根据代码的词法作用域来走的,比如说
function foo() { return (a) => { console.log( this.a ); }; } var obj1 = { a: 2 }; var obj2 = { a: 3 }; var bar = foo.call( obj1 ); bar.call( obj2 ); // 2
结果已经很明显了,
好了,以上内容就讲完了,通过我的一些讲解,是不是有一点理解了呢,如果有任何的不同意见,欢迎讨论哦
参考书籍《你不知道的Javascript》上卷
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Python defaultdict 模块和 namedtuple 模块
在Python中有一些内置的数据类型,比如int, str, list, tuple, dict等。Python的collections模块在这些内置数据类型的基础上,提供了几个额外的数据类型:namedtuple, defaultdict, deque, Counter, OrderedDict等,其中defaultdict和namedtuple是两个很实用的扩展类型。defaultdict继承自dict,namedtuple继承自tuple。 一、defaultdict 1. 简介 在使用Python原生的数据结构dict的时候,如果用d[key]这样的方式访问,当指定的key不存在时,是会抛出KeyError异常的。但是,如果使用defaultdict,只要你传入一个默认的工厂方法,那么请求一个不存在的key时, 便会调用这个工厂方法使用其结果来作为这个key的默认值。 defaultdict在使用的时候需要传一个工厂函数(function_factory),defaultdict(function_factory)会构建一个类似dict的对象,该对象具有默认值,默认值通过调用工...
- 下一篇
janusgraph源码分析1-下载编译启动
date: 2018-04-26title: "janusgraph源码分析1-下载编译启动"author: "邓子明"tags: - 源码 - janusgraph categories: - 源码分析 janusgraph源码分析1-下载编译启动 研究了好久的 neo4j源码,现在公司要换 janusgraph,只要半途而废开始研究 janusgraph 了https://github.com/JanusGraph/janusgraph和http://janusgraph.org/ 一、下载编译 我直接使用github desktop打开了 janusgraph 的源码,使用IDEA打开,然后编译: # 编译完整的 mvn -settings ~/opt/soft/apache-maven-3.5.0/conf/settings.xml -Dlicense.skip=true -DskipTests clean install # 只编译core部分 mvn -pl janusgraph-core -am clean install -Dlicense.skip=true -Dsk...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- CentOS8安装Docker,最新的服务器搭配容器使用
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- CentOS7,8上快速安装Gitea,搭建Git服务器
- SpringBoot2全家桶,快速入门学习开发网站教程
- Docker安装Oracle12C,快速搭建Oracle学习环境
- 设置Eclipse缩进为4个空格,增强代码规范
- CentOS7安装Docker,走上虚拟化容器引擎之路