关闭

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

时间: 2018-12-06阅读: 835标签: this

一.   this绑定规则

函数调用位置决定了this的绑定对象,必须找到正确的调用位置判断需要应用下面四条规则中的哪一条。 


1.1 默认绑定

看下面代码

function foo() {
    console.log(this.a);
}

var a = 1;

foo(); // 2

调用foo的时候,this应用了默认绑定,this指向了全局对象,但是在严格模式下,那么全局对象将无法进行默认绑定,因此this会绑定到undefined

function foo() {
    ‘use strict‘;

    console.log(this.a);
}

var a = 1;

foo();  // TypeRrror: this is undefined

严格模式下与 foo() 的调用位置无关:

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

(function(){
    "use strict";
    foo(); // 2
})();

 

1.2 隐式绑定

另一条需要考虑的规则是调用位置是否有上下文对象

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

但是无论是直接在 obj 中定义还是先定义再添加为引用属性, 这个函数严格来说都不属于 obj 对象,然而, 调用位置会使用 obj 上下文来引用函数, 因此你可以说函数被调用时 obj 对象“ 拥有” 或者“ 包含” 它

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

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

1.2.1 隐式丢失

一个最常见的 this 绑定问题就是被隐式绑定的函数会丢失绑定对象, 也就是说它会应用默认绑定, 从而把 this 绑定到全局对象或者 undefined 上, 取决于是否是严格模式,

function foo() {
    console.log(this.a);
}
var obj = {
    a: 2,
    foo: foo
};
var bar = obj.foo; // 函数别名!
var a = "oops, global"; // a 是全局对象的属性
bar(); // "oops, global"

虽然 bar 是 obj.foo 的一个引用, 但是实际上, 它引用的是 foo 函数本身, 因此此时的 bar() 其实是一个不带任何修饰的函数调用, 因此应用了默认绑定。在js内置函数中如setTimeout也是如此:

function foo() {
    console.log(this.a);
}
var obj = {
    a: 2,
    foo: foo
};
var a = "oops, global"; // a 是全局对象的属性
setTimeout(obj.foo, 100); // "oops, global"

和下面伪代码类似:

function setTimeout(fn, delay) {
    // 等待 delay 毫秒
    fn(); // <-- 调用位置!
}

1.3.显示绑定

call(...),apply(...)可以指定this的绑定对象(前者接收多个参数如call(this, param1, param2, param3...),后者接受一个或两个参数apply(this, [...]))

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

通过 foo.call(..), 我们可以在调用 foo 时强制把它的 this 绑定到 obj 上。 如果你传入了一个原始值( 字符串类型、 布尔类型或者数字类型) 来当作 this 的绑定对 象, 这个原始值会被转换成它的对象形式( 也就是 new String(..)、 new Boolean(..) 或者 new Number(..))。 这通常被称为“ 装箱”。

1.3.1 硬绑定

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

我们创建了函数 bar(), 并在它的内部手动调用 了 foo.call(obj), 因此强制把 foo 的 this 绑定到了 obj。 无论之后如何调用函数 bar, 它 总会手动在 obj 上调用 foo。 这种绑定是一种显式的强制绑定, 因此我们称之为硬绑定。创建一个 i可以重复使用的辅助函数:

function foo(something) {
    console.log(this.a, something);
    return this.a + something;
}
//简单的辅助绑定函数
function bind(fn, obj) {
    return function() {
        return fn.apply(obj, arguments);
    };
}
var obj = {
    a: 2
};
var bar = bind(foo, obj);
var b = bar(3); // 2 3
console.log(b); // 5

由于硬绑定是一种非常常用的模式, 所以在 ES5 中提供了内置的方法 Function.prototype.bind, bind(..) 会返回一个硬编码的新函数, 它会把参数设置为 this 的上下文并调用原始函数  

1.3.2 API调用的“上下文”

function foo(el) {
    console.log(el, this.id);
}
var obj = {
    id: "awesome"
};
// 调用 foo(..) 时把 this 绑定到 obj
[1, 2, 3].forEach(foo, obj);
// 1 awesome 2 awesome 3 awesome

这些函数实际上就是通过 call(..) 或者 apply(..) 实现了显式绑定, 这样你可以少些一些代码。

1.4new绑定

JavaScript 中, 构造函数只是一些 使用 new 操作符时被调用的函数。 它们并不会属于某个类, 也不会实例化一个类。 实际上, 它们甚至都不能说是一种特殊的函数类型, 它们只是被 new 操作符调用的普通函数而已。使用 new 来调用函数, 或者说发生构造函数调用时, 会自动执行下面的操作:

    1. 创建( 或者说构造) 一个全新的对象

    2. 这个新对象会被执行 [[ 原型 ]] 连接

    3. 这个新对象会绑定到函数调用的 this

    4. 如果函数没有返回其他对象, 那么 new 表达式中的函数调用会自动返回这个新对象

 

二. 优先级

毫无疑问, 默认绑定的优先级是四条规则中最低的,来看看隐式绑定和显示绑定

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 = {
    foo: foo
};
var obj2 = {};
obj1.foo(2);
console.log(obj1.a); // 2
obj1.foo.call(obj2, 3);
console.log(obj2.a); // 3
var bar = new obj1.foo(4);
console.log(obj1.a); // 2
console.log(bar.a); // 4

可以看到 new 绑定比隐式绑定优先级高。 但是 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

bar 被硬绑定到 obj1 上, 但是 new bar(3) 并没有像我们预计的那样把 obj1.a 修改为 3。 相反,new 修改了硬绑定( 到 obj1 的) 调用 bar(..) 中的 this。 因为使用了 new 绑定, 我们得到了一个名字为 baz 的新对象, 并且 baz.a 的值是 3。之所以要在 new 中使用硬绑定函数, 主要目的是预先设置函数的一些参数, 这样在使用 new 进行初始化时就可以只传入其余的参数。 bind(..) 的功能之一就是可以把除了第一个 参数( 第一个参数用于绑定 this) 之外的其他参数都传给下层的函数( 这种技术称为“ 部 分应用”, 是“ 柯里化” 的一种)。 举例来说:

function foo(p1, p2) {
    this.val = p1 + p2;
}
//之所以使用 null 是因为在本例中我们并不关心硬绑定的 this 是什么
// 反正使用 new 时 this 会被修改
var bar = foo.bind(null, "p1");
var baz = new bar("p2");
baz.val; // p1p2
站长推荐

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

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

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

this的四种绑定策略:默认绑定、隐式绑定、显示绑定、new绑定。首先要明确的是一般情况下,this不是函数被定义时绑定,而是函数被调用时被绑定 ,那么函数中的this有四种绑定方式:

Js中this指向问题(函数的调用方式)

在ES6之前,函数内部的this是由函数的调用方式决定的。构造函数调用 ,这时 p.say 属于Object,为Object的实例。this:say构造函数的实例,实例中并没有age属性,值为:undefined

听说你很懂this,是真的吗?

his关键字是JavaScript中最复杂的机制之一,是一个特别的关键字,被自动定义在所有函数的作用域中,但是相信很多JvaScript开发者并不是非常清楚它究竟指向的是什么。听说你很懂this,是真的吗?

JS this指向问题

this问题,是很多前端同学初学JS的拦路虎,甚至一些两三年工作经验的同学对this的理解还是模棱两可或是有一些误解,一个常见的误区就是:this指向函数本身。本文尝试总结了一下this的使用,并在最后总结了this指向的确定规则

JavaScript中this指向问题

记得初学 JavaScript 时,其中 this 的指向问题曾让我头疼不已,我还曾私自将其与闭包、原型(原型链)并称 JS 武林中的三大魔头。如果你要想在 JS 武林中称霸一方,必须将这三大魔头击倒

js手写实现apply,call,bind

apply和call的区别就是传的参数形式不一样。call是一个一个的传,apply可以将参数以数组的形式传进去。而bind是传入第二个和后面的参数,且绑定this,返回一个转化后的函数。

Js中常见this指向问题

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

JavaScript的奇妙this

this 关键字是 JavaScript 中最复杂的机制之一。它是一个很特别的关键字,被自动定义在所有函数的作用域中。但是即使是非常有经验的 JavaScript 开发者也很难说清它到底指向什么。

小程序中为什么使用var that=this?

在小程序或者js开发中,this是指当前对象,只是一个指针,真正的对象存放在堆内存中,this的指向在程序执行过程中会变化,因此如果需要在函数中使用全局数据需要合适地将this复制到变量中。

Js中this的绑定规则

对于 JavaScript 新手来说,this 是非常基础同时也难以理解的知识点。比如下面的代码,this 指向就有三种方式。默认情况下,this 指向全局对象。例如下面的代码。

点击更多...

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