关闭

JavaScript函数中this的四种绑定策略

时间: 2019-01-02阅读: 855标签: this

再一次进行对this知识点的复习,每一次都是温故知新的过程。这次对于this的学习基于《你所不知道的JavaScript》这本书,算是对于书中的知识做一个总结。

首先要明确的是一般情况下,this不是函数被定义时绑定,而是函数被调用时被绑定  

那么函数中的this有四种绑定方式:


1. 默认绑定

直接调用函数,使用不带任何修饰的函数进行调用,只能使用默认绑定,无法应用其它规则,代码如下:
function foo() {
  console.log(this.a);
}
var a = 1;
foo() // 1

2. 隐式绑定

函数被调用时有上下文对象,那么this会绑定这个上下文对象,代码如下:
function foo() {
  console.log(this.a);
}
var obj = {
  a: 2,
  foo: foo
}
var a = 1;
obj.foo() // 2

其实不能讲foo这个函数属于obj对象,但是foo函数被调用时的落脚点的确是指向obj对象,当函数引用有上下文对象时,隐式绑定就会把函数调用中的this绑定到这个上下文对象;

对象属性引用链中只有最顶层或者说最后一层会影响调用位置

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

隐式丢失

对于应用隐式绑定方式绑定this经常导致的一个情况是隐式丢失this

function foo() {
  console.log(this.a);
}
var obj = {
  a: 2,
  foo: foo
}
var bar = obj.foo;
var a = 'global';
bar() // 'global'

针对这种情况,虽然bar是obj.foo的一个引用,但是实际上它引用的是foo函数本身,此时bar()其实是一个不带任何修饰的函数调用,应用了默认绑定;


3. 硬绑定

使用call,apply或者bind,在调用函数的时候直接指定上下文对象,那么函数中的this会绑定到传入的对象,代码如下:
function foo() {
  console.log(this.a);
}
var obj = {
  a: 1
}
foo.apply(obj) // 1

4. new绑定

使用new调用某个构造函数,代码如下:
function Foo(a) {
  this.a = a;
  console.log(this.a);
}
var obj = new Foo(2);
console.log(obj.a) // 2



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1747

js中this的绑定规则及优先级

this绑定规则:函数调用位置决定了this的绑定对象,必须找到正确的调用位置判断需要应用下面四条规则中的哪一条。默认绑定、隐式绑定:另一条需要考虑的规则是调用位置是否有上下文对象

JS匿名函数this调用变量报错

突然,看到附件选择的方法,人家是设置的this.fileUrl成功的。比对下,什么区别。这就是JS中匿名方法的this指向问题,function的声明方式,this指向的是本身,父级的变量都无法访问。

JavaScript中this指针指向的彻底理解

首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象

寻找this绑定对象?找到调用栈&调用位置

经常听到这么一句话,找this只需要看 谁是调用方 。当函数被调用时会记录函数调用调用方式、传参包括this等各种属性。有时候 this 绑定对象情况太抽象,找到准确的 调用方 还是有一定的难度。

JS 中几种轻松处理this指向方式

与对象分离的方法会产生 this 指向不正确问题。静态地绑定this,可以手动使用一个附加变量self来保存正确的上下文对象。然而,更好的替代方法是使用箭头函数,其本质上是为了在词法上绑定this。

Js中常见this指向问题

无论是工作或者面试中,this指向问题是经常遇到的。所以这篇文章把常见的指向问题列出来给大家,避免踩坑。首先我们要知道,在函数中this到底取何值,是在函数真正被调用执行的时候确定的,函数定义的时候确定不了,也就是说,this的指向完全取决于函数调用的位置

浅析js中的this

this是一个对象,一般存在于函数中,表示当前函数的执行上下文;值得一提的是,当函数在执行后,this才有绑定的对象,函数未执行时,this没有内容,接下来我们看看在不同场景下的this的指向

更细的角度来看 JS 中的 this

JS 中的this关键字对于初学者来说是一个谜,对于经验丰富的开发人员来说则是一个永恒的难题。this 实际上是一个移动的目标,在代码执行过程中可能会发生变化,而没有任何明显的原因。首先,看一下this关键字在其他编程语言中是什么样子的。

JavaScript之this

JavaScript中的this比较灵活,根据在不同环境下,或者同一个函数在不同方式调用下,this都有可能是不同的。但是有一个总的原则,那就是this指的是,调用函数的那个对象

js中this的详细解释,JavaScript中this绑定规则【你不知道的JavaScript】

this的绑定过程之前的调用栈 和 调用位置,this绑定规则:1、默认模式,2、隐式绑定,3、显式绑定,4、new绑定

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!