this的绑定规则

1 默认绑定:

function foo(){
console.log(this.a);
}
var a = 2 ;
foo(); //

调用 foo() 的时候其实相当于 window.foo(),所以 this.a 其实指向的是 window.a

2 隐式绑定

function foo(){
console.log( this.a );
}
var obj1 = {
a: 2,
obj2: obj2
};
var obj2 = {
a: 42,
foo: foo
};
obj1.obj2.foo(); //

当函数引用有上下文对象时,隐式绑定规则会把函数调用中的 this 绑定到这个上下文的对象。因为调用 foo() 时 this 被绑定到 obj,因此 this.a 和 obj.a 是一样的

对象属性引用链中只有上一层或者说最后一层在调用位置起作用(这里是由于作用域链对于 this 的寻找只会到当前的活动对象或变量对象中,不会到上一层)

3 显式绑定

function foo(){
console.log( this.a );
}
var obj = {
a: 2,
};
var bar = function(){
foo.call( obj );
};
bar(); //
setTimeout(bar,100) // // 显示绑定的 bar 不可能再修改它的 this
bar.call(window); //

即使用 apply() 和 call() 方法。它们的第一个参数是一个对象,在调用函数时将其绑定到 this。他们的主要区别就是第二个参数。
我们创建了函数 bar(),并在内部调用了 foo.call(obj),因此强制把 foo 的 this 绑定到了 obj。之后无论如何调用 bar(),它总会手动在 obj 上调用 foo。这种绑定是一种强制绑定,也成为硬绑定。
由于硬绑定是一种非常常用的模式,所以 ES5 提供了 bind() 函数。用法如下

function foo(something){
console.log( this.a, something );
return this.a + something;
}
var obj = {
a:2
}
var bar = foo.bind( obj );
var b = bar(3); // 2 3;
console.log(b); //

4 new 绑定
使用 new 调用函数只是对函数的 " 构造调用 ",所有的函数都可以使用 new 来调用。
使用 new 来调用函数时,会自动执行如下操作

创建(或者说构造)一个全新的对象
这个新对象会被执行 [[Prototype]] 连接
这个新对象会绑定到函数调用的 this
如果函数没有返回其他对象,那么 new 表达式中的函数调用会自动返回这个新对象
用代码表示就是如下步骤

function foo(a){
this.a = a;
}
var bar = new foo(2);
console.log(bar.a); //
// 其中 new foo(2) 进行的是类似如下的操作
{
var obj = new Object();
obj.__proto__ = foo.prototype;
var result = foo.call(obj,"2");
return result === 'object' ? result : obj
}

使用 new 来调用 foo( … ) 时,我们会构造一个新对象并把它绑定到 foo( … ) 调用中的 this

以上几种方式的优先级:
【1】是否是new绑定?如果是,this绑定的是新创建的对象var bar = new foo();
【2】是否是显式绑定?如果是,this绑定的是指定的对象var bar = foo.call(obj);
【3】是否是隐式绑定?如果是,this绑定的是属于的对象var bar = obj1.foo(); 
【4】如果都不是,则使用默认绑定 var bar = foo();

javascript中的this绑定问题的更多相关文章

  1. JavaScript中this的绑定规则

    JavaScript中this的绑定规则 前言 我们知道浏览器运行环境下在全局作用域下的this是指向window的,但是开发中却很少在全局作用域下去使用this,通常都是在函数中进行使用,而函数使用 ...

  2. 理解Javascript中的事件绑定与事件委托

    最近在深入实践js中,遇到了一些问题,比如我需要为动态创建的DOM元素绑定事件,那么普通的事件绑定就不行了,于是通过上网查资料了解到事件委托,因此想总结一下js中的事件绑定与事件委托. 事件绑定   ...

  3. javascript中的双向绑定

    阅读目录 一:发布订阅模式实现数据双向绑定 二:使用Object.defineProperty 来实现简单的双向绑定. 前言: 双向数据绑定的含义:可以将对象的属性绑定到UI,具体的说,我们有一个对象 ...

  4. JavaScript 中 onload 事件绑定多个方法的优化建议

    页面加载完毕时会触发 onload 事件.基于内容(HTML)要与行为(JavaScript)分离的编码思想,我们需要将一些对页面的初始化操作写在方法内,并通过window.onload = func ...

  5. JavaScript中给onclick绑定事件后return false遇到的问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. JavaScript中的this绑定丢失及解决方法

    经常犯的错误:混淆了this绑定规则. 代码如下: var obj = { id: 'vexekefo', cool() { console.log(this.id); } }; var id = ' ...

  7. JavaScript 中 onload 事件绑定多个方法

    当需要调用的方法较多时,我们可以进一步优化,编写一个专门用于绑定 onload事件的方法: function addLoadEvent(func) { //把现有的 window.onload 事件处 ...

  8. JavaScript中事件绑定的方法总结

    最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScr ...

  9. 关于JavaScript中this的软绑定

    首先,什么是软绑定? 所谓软绑定,是和硬绑定相对应的一个词,在详细解释软绑定之前,我们先来看看硬绑定.在JavaScript中,this的绑定是动态的,在函数被调用的时候绑定,它指向什么完全取决于函数 ...

随机推荐

  1. 记一次PATH环境变量设置不生效的问题

    问题:卸载原有版本jdk后,如下图在/etc/profile中配置新的环境变量且source /etc/profile 生效配置后,JAVA_HOME值都正确,但PATH变量值还是不对 echo $P ...

  2. 2017icpc beijing-I题-Colored Nodes

    题意 给定一个n个点m条边的无向图,一开始点i的颜色为i,在第i+kn秒开始时,与节点i相邻的节点会被染成i的颜色(k为自然数) 定义D(i,j)第j秒结束时颜色为i的节点个数,求: $F(i)=\l ...

  3. OpenCV 学习笔记(1-1)opecv3.41及其扩展库在VS2015下配置

    其他正常 opencv_aruco341.lib opencv_bgsegm341.lib opencv_bioinspired341.lib opencv_calib3d341.lib opencv ...

  4. (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)

    自定义事件: 我们知道,父组件使用prop传递数据的子组件,但子组件怎么跟父组件通信呢? 这个时候Vue的自定义事件系统就派得上用场了. 自定义事件知道两件事: (1).绑定 (2).触发 注意:$o ...

  5. 通过patch 方式解决cube.js 集成cratedb 的问题

    今天有写过一个简单的cube.js 集成cratedb 的说明,主要是在driver 上的兼容问题,处理方法是删除不兼容的代码 实际上我们也可以通过类似linux c 开发中的patch 方式解决,简 ...

  6. [PHP]全国省市区信息,mysql数据库记录

    下载地址: https://files.cnblogs.com/files/wukong1688/T_Area.zip 或者也可以复制如下内容: CREATE TABLE IF NOT EXISTS ...

  7. A*G`C002

    AGC002 A Range Product 不会,弃疗了/kk https://agc002.contest.atcoder.jp/submissions/7908938 B Box and Bal ...

  8. 【题解】洛谷 P1449 后缀表达式

    目录 题目 思路 \(Code\) 题目 P1449 后缀表达式 思路 栈.题目说的不是很清楚,没说包含什么操作.除法用整数除法就行. 先string读入字符串,然后从前往后看如果是个数字就入栈,如果 ...

  9. nginx 反向代理之 proxy_cache

    proxy_cache将从C上获取到的数据根据预设规则存放到B上(内存+磁盘)留着备用,A请求B时,B会把缓存的这些数据直接给A,而不需要再去向C去获取. proxy_cache相关功能生效的前提是, ...

  10. WSL调用Windows下的ParaView对OpenFOAM进行后处理

    OpenFOAM可以在windows下的Linux子系统(WSL)安装,但是很麻烦的一个问题是WSL没有图形化的界面,只有一个控制台窗口,在后处理的过程中我们就没有办法直接调用paraFoam命令启动 ...