JS中this的4种绑定规则
this
- ES6中的箭头函数采用的是词法作用域。
- 为什么要使用this:使API设计得更简洁且易于复用。
- this即不指向自身,也不指向函数的词法作用域。
- this的指向只取决于函数的调用方式
this绑定规则
- new > 显示绑定 > 隐式绑定 > 默认绑定
默认绑定
- 当独立函数调用时,不管是否在调用栈中,this都指向全局对象(浏览器中为window)
- 严格模式下,不能将全局对象用于默认绑定。
var a = 2;
function foo(){
console.log(this.a);
}
function bar(){
var a = 5;
foo();
}
bar(); // 2
隐式绑定
- 当函数引用有上下文对象时,隐式绑定规则会把函数调用中的this绑定到这个上下文对象。
- 对象属性引用链中只有最后一层在调用位置中起作用。
- 要求:对象内部必须包含一个指向函数的属性,该对象可通过这个属性间接引用函数。
function foo() {
console.log( this.a );
}
var obj2 = {
a: 42,
foo: foo
};
var obj1 = {
a: 2,
obj2: obj2
};
obj1.obj2.foo(); // 42
- 隐式丢失
function foo() {
console.log( this.a );
}
var obj = {
a: 2,
foo: foo
};
var bar = obj.foo; // 这里bar将引用foo函数本身,所以不带有函数对象的上下文
var a = "oops, global"; // a是全局对象的属性
bar(); // "oops, global"
和回调函数的情况下(参数传递时的隐式赋值)
function foo() {
console.log( this.a );
}
function doFoo(fn) {
// 参数传递时,相当于fn = obj.foo,就和上个例子一样了
fn(); // <-- call-site!
}
var obj = {
a: 2,
foo: foo
};
var a = "oops, global"; // `a` also property on global object
doFoo( obj.foo ); // "oops, global"
显式绑定
- 采用call()和apply(),通过传入一个对象(若为基本类型,会被封装函数转为对象—装箱),将this绑定到该对象。
- 硬绑定
function foo() {
console.log( this.a );
}
var obj = {
a: 2
};
var bar = function() {
foo.call( obj );
};
bar(); // 2
setTimeout( bar, 100 ); // 2
// 硬绑定后bar无论怎么调用,都不会影响foo函数的this绑定
bar.call( window ); // 2
硬绑定的典型应用是如下的包裹函数:
function foo(something) {
console.log( this.a, something );
return this.a + something;
}
var obj = {
a: 2
};
var bar = function() {
return foo.apply( obj, arguments ); // 将obj对象硬编码进去
};
var b = bar( 3 ); // 2 3
console.log( b ); // 5
即将内部函数用apply硬绑定到某个对象,无论怎么调用这个包裹函数,都不会影响内部函数的this。
bind辅助函数如下:
function foo(something) {
console.log( this.a, something );
return this.a + something;
}
// simple `bind` helper
function bind(fn, obj) {
return function() {
return fn.apply( obj, arguments ); // 利用参数将obj传入进去
};
}
var obj = {
a: 2
};
var bar = bind( foo, obj ); // bind( foo, obj )会返回一个包裹函数
var b = bar( 3 ); // 2 3
console.log( b ); // 5
总结:上述包裹函数,想要包裹其他函数,只能一个一个重复写,硬编码的方式导致不能被重用,当某种功能需要多次重复使用时,将其抽象出来,成为函数。
new绑定
- 任何函数都可能被用作构造函数,当函数被new操作符“构造调用”时,会执行下面操作:
1. 创建一个新对象(若该函数不是JS内置的,则创建一个新的Object对象);
2. 将this绑定到这个对象;
3. 执行构造函数中的代码(为这个新对象添加属性);
4. 若函数没有返回其他对象,则自动返回这个新对象;若函数有return返回的是非对象,则还是自动返回这个新对象,即覆盖那个非对象。
function foo(a) {
this.a = a;
}
var bar = new foo( 2 );
console.log( bar.a ); // 2
补充说明
- 间接引用
function foo() {
console.log( this.a );
}
var a = 2;
var o = { a: 3, foo: foo };
var p = { a: 4 };
o.foo(); // 3
(p.foo = o.foo)(); // 2,由于p.foo = o.foo的返回值是目标函数的引用,所以调用位置是foo(),而不是p.foo()或o.foo()
- 箭头函数:不使用这四个this规则,根据词法作用域来决定this。
function foo() {
// 返回一个箭头函数
return (a) => {
// `this` here is lexically adopted from `foo()`
console.log( this.a );
};
}
var obj1 = {
a: 2
};
var obj2 = {
a: 3
};
// foo()不是箭头函数,他的this被绑定到obj1
var bar = foo.call( obj1 ); // foo.call( obj1 )返回箭头函数,所以bar为箭头函数
bar.call( obj2 ); // 2! 箭头函数的this无法被修改,new也不行
如下为和箭头函数一样的模式:
function foo() {
var self = this; // lexical capture of `this`
setTimeout( function(){
console.log( self.a );
}, 100 );
}
var obj = {
a: 2
};
foo.call( obj ); // 2
this绑定的趣题:
更多博客:https://github.com/Lmagic16/blog
原文地址:https://segmentfault.com/a/1190000016678888
JS中this的4种绑定规则的更多相关文章
- 深入理解this机制系列第一篇——this的4种绑定规则
× 目录 [1]默认绑定 [2]隐式绑定 [3]隐式丢失[4]显式绑定[5]new绑定[6]严格模式 前面的话 如果要问javascript中哪两个知识点容易混淆,作用域查询和this机制绝对名列前茅 ...
- js中this的四种使用方法
0x00:js中this的四种调用模式 1,方法调用模式 2,函数调用模式 3,构造器调用模式 4,apply.call.bind调用模式 0x01:第一种:方法调用模式 (也就是用.调用的)this ...
- this的四种绑定规则总结
一.默认绑定 1.全局环境中,this默认绑定到window 2.函数独立调用时,this默认绑定到window console.log(this === window);//true functio ...
- 【温故知新】——原生js中常用的四种循环方式
一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0 网页输出“欢迎下次光临” 在网页中弹出框输入1 网页输出“查询中……” 在 ...
- JS 中深拷贝的几种实现方法
JS 中深拷贝的几种实现方法1.使用递归的方式实现深拷贝 //使用递归的方式实现数组.对象的深拷贝 function deepClone1(obj) { //判断拷贝的要进行深拷贝的是数组还是对象,是 ...
- JS中常见的几种报错类型
1.SyntaxError(语法错误) 解析代码时发生的语法错误 var 1a; //Uncaught SyntaxError: Invalid or unexpected token 变量名错误 c ...
- 关于原生js中函数的三种角色和jQuery源码解析
原生js中的函数有三种角色: 分两大种: 1.函数(最主要的角色)2.普通对象(辅助角色):函数也可以像对象一样设置属于本身的私有属性和方法,这些东西和实例或者私有变量没有关系两种角色直接没有必然的关 ...
- js中继承的几种用法总结(apply,call,prototype)
一,js中对象继承 js中有三种继承方式 1.js原型(prototype)实现继承 <SPAN style="BACKGROUND-COLOR: #ffffff">& ...
- JS中常见的几种继承方法
1.原型链继承 // 1.原型链继承 /* 缺点:所有属性被共享,而且不能传递参数 */ function Person(name,age){ this.name = name this.age = ...
随机推荐
- b+tree索引在MyIsam和InnoDB的不同实现方式
普通二叉搜索树当索引的劣势: (1)每个节点占用的空间太少,不能很好的利用磁盘的预读性 (2)数据不规律的话,很可能形成链表 (3)频繁IO b树当索引机制相比于二叉树的优势和劣势: (1)每个节点有 ...
- TCP之11种状态变迁
1. TCP 之11种状态变迁 TCP 为一个连接定义了 11 种状态,并且 TCP 规则规定如何基于当前状态及在该状态下所接收的分节从一个状态转换到另一个状态.如,当某个应用进程在 CLOSED 状 ...
- Python 读文件:IOError: [Errno 0] Error
Windows系统下,这种情况发生在读取文件,再写入过程中出现. 原因是读完文件后python不知道当前文件位置在哪里. 方法一是:在关闭文件前只做读或者写一种操作. 方法二是:在写入文件前使用fil ...
- R语言:读入txt文件中文文本出现乱码解决方案
下载安装 readr 因为使用内置函数 read.table() 读入应该是格式不符合要求会报错 library(readr) help(package="readr") 可以使用 ...
- 转载:一文详解SQL解析与应用
转载地址:http://www.elecfans.com/emb/20180618696111.html 数据库作为核心的基础组件,是需要重点保护的对象.任何一个线上的不慎操作,都有可能给数据库带来严 ...
- Android jni/ndk编程五:jni异常处理
在Java的编程中,我们经常会遇到各种的异常,也会处理各种的异常.处理异常在java中非常简单,我们通常会使用try-catch-finally来处理,也可以使用throw简单抛出一个异常.那么在jn ...
- layui表格遇到的小操作
表头文字显示不全 done:function(res){ tdTitle() }, /*表头文字显示不全*/ function tdTitle(){ $('th').each(function(ind ...
- 最长公共子子串 java
package maxCommon; /** * 找到最长公共子串 * @author root */ public class MaxCommonUnSeries { public static v ...
- [spring]AOP(切面)编程
AOP 即 Aspect Oriented Program 面向切面编程 首先,在面向切面编程的思想里面,把功能分为核心业务功能,和周边功能. 所谓的核心业务,比如登陆,增加数据,删除数据都叫核心业务 ...
- 八十:memcached之安装与参数
Memcached是一个高并发的内存键值对缓存系统,它的主要作用是将数据库查询结果,内容,以及其它一些耗时的计算结果缓存到系统内存中,从而加速Web应用程序的响应速度. 官网:http://memca ...