javascript中的this绑定问题
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绑定问题的更多相关文章
- JavaScript中this的绑定规则
JavaScript中this的绑定规则 前言 我们知道浏览器运行环境下在全局作用域下的this是指向window的,但是开发中却很少在全局作用域下去使用this,通常都是在函数中进行使用,而函数使用 ...
- 理解Javascript中的事件绑定与事件委托
最近在深入实践js中,遇到了一些问题,比如我需要为动态创建的DOM元素绑定事件,那么普通的事件绑定就不行了,于是通过上网查资料了解到事件委托,因此想总结一下js中的事件绑定与事件委托. 事件绑定 ...
- javascript中的双向绑定
阅读目录 一:发布订阅模式实现数据双向绑定 二:使用Object.defineProperty 来实现简单的双向绑定. 前言: 双向数据绑定的含义:可以将对象的属性绑定到UI,具体的说,我们有一个对象 ...
- JavaScript 中 onload 事件绑定多个方法的优化建议
页面加载完毕时会触发 onload 事件.基于内容(HTML)要与行为(JavaScript)分离的编码思想,我们需要将一些对页面的初始化操作写在方法内,并通过window.onload = func ...
- JavaScript中给onclick绑定事件后return false遇到的问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript中的this绑定丢失及解决方法
经常犯的错误:混淆了this绑定规则. 代码如下: var obj = { id: 'vexekefo', cool() { console.log(this.id); } }; var id = ' ...
- JavaScript 中 onload 事件绑定多个方法
当需要调用的方法较多时,我们可以进一步优化,编写一个专门用于绑定 onload事件的方法: function addLoadEvent(func) { //把现有的 window.onload 事件处 ...
- JavaScript中事件绑定的方法总结
最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScr ...
- 关于JavaScript中this的软绑定
首先,什么是软绑定? 所谓软绑定,是和硬绑定相对应的一个词,在详细解释软绑定之前,我们先来看看硬绑定.在JavaScript中,this的绑定是动态的,在函数被调用的时候绑定,它指向什么完全取决于函数 ...
随机推荐
- Ofbiz项目学习——阶段性小结——服务返回结果
一.返回成功 1.在.DispatcherReturnDemoService类中编写服务[returnSuccess],内容如下: /** * 返回成功结果 * @param dctx * @para ...
- 【坑】【数组的坑】1、对象assign复制的假深度,2、数组slice复制的坑,3、还有数组map复制的坑
1.对象复制的坑 Object.assign() Object.assign() //浅复制 基本没用 跟直接用= 一样 Object.assign(true,{}) // 以为是深拷贝,其实只是一级 ...
- 2019 CSP-J复赛游记
不出行?不出行考屁呢? 今天的CSP-J似乎比去年简单了一些,可它... 好了,来说一说我的情况. T1:太水,5分钟秒 T2:这个数据有点尴尬,双重循环铁定爆,用链表有有一点小题大做.本蒟蒻在考场上 ...
- LeetCode 886. Possible Bipartition
原题链接在这里:https://leetcode.com/problems/possible-bipartition/ 题目: Given a set of N people (numbered 1, ...
- Numpy | 09 高级索引
NumPy 比一般的 Python 序列提供更多的索引方式.除了之前看到的用整数和切片的索引外,数组可以由整数数组索引.布尔索引及花式索引. 整数数组索引 实例1:获取数组中(0,0),(1,1)和( ...
- 关于kmp算法
字符串匹配算法简称kmp 日常安利大佬博客(真的是一篇很好的文章) 觉得百度百科讲的也挺好 就是给出两个字符串a, b 求b在a中的所有位置 next数组:代表当前字符之前的字符串中,有多大长度的相同 ...
- exlucas易错反思
模板和题解 复习了一下 exlucas的模板,结果写挂四次(都没脸说自己以前写过 是该好好反思一下呢~ 错的原因如下: 第一次WA:求阶乘的时候忘了递归处理(n/p)! 第二次WA:求阶乘时把p当成循 ...
- linux 所有命令无法使用
配置nginx时,错误export之后linux 所有命令无法使用 出现这个问题是因为系统的环境变量没有正确配置造成的,造成这个原因有很多,比如系统升级,比如不正当操作等导致环境变量被覆盖修改,解决的 ...
- jmeter(五十一)_性能测试中的服务器资源监控与分析
概述 性能测试过程中,对服务器资源的监控是必不可少的.这里的资源又分了两块,windows和linux linux下监控资源 访问网址http://jmeter-plugins.org/downl ...
- 修改 ulimit 时 需要注意的问题