JavaScript之this使用

1、调用位置


在理解this的绑定之前,首先理解调用位置,决定this的绑定

function a() {

  // 当前调用栈是:a, 因此,当前调用位置是全局作用域

  console.log('a');

  b(); // b的调用位置

}

function b() {

  // 当前调用栈是:a=>b, 因此,当前调用位置是a中

  console.log('b');

  c(); // c的调用位置

}

function c() {

  // 当前调用栈是:a=>b=>c, 因此,当前调用位置是b中

  console.log('c')

}

a();

2、绑定规则


2.1 默认绑定

最常用的函数调用类型:独立函数调用。可以看做默认规则

this.a被解析成了全局变量a,因为本例中,函数调用应用了this的默认绑定,因此this指向全局对象

function foo() {

  console.log(this.a);

}

var a = 2;

foo(); // 2

 如果在严格模式下,全局对象无法使用默认绑定,因此this会绑定到undefined

function foo() {

  "use strict"

  console.log(this.a);

}

var a = 2;

foo(); // TypeError: this is undefined

this的绑定规则完全取决于调用位置,但是运行在非严格模式下,默认绑定才能绑定到全局对象;严格模式下与foo()的调用位置无关

function foo() {

  console.log(this.a);

}

(function () {

  "use strict"

  foo(); // 2

})();

2.2 隐式绑定

另一条需要考虑的规则是调用位置是否有上下文对象,或者说是否被某个对象拥有或者包含,不过这种说法可能会造成一些误导.

foo函数严格来说都不属于obj对象,然而调用位置会使用obj上下文来引用函数,因此函数被调用时obj对象“拥有”或“包含”foo

当foo()被调用时,它的落脚点确实指向obj对象,当函数引用有上下文对象时,隐式绑定规则会把函数调用中的this绑定到这个上下文对象。

function foo() {

  console.log(this.a);

}

var obj = {

  a: 2,

  foo: foo

}

obj.foo(); // 2

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

function foo() {

  console.log(this.a)

}

var obj1 = {

  a: 42,

  foo: foo

}

var obj2 = {

  a: 2,

  obj1: obj1

}

obj2.obj1.foo(); // 42

隐式丢失

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

虽然bar是obj.foo的一个引用,到时实际上,它引用的是foo函数本身,因此此时的bar()其实是一个不带任何修饰的函数调用,因此应用了默认绑定。

function foo() {

  console.log(this.a)

}

var obj = {

  a: 2,

  foo: foo

}

var bar = obj.foo; // 函数别名

var a = 'global'; // a是全局对象的属性

bar(); // 'global

参数传递其实就是一种隐式赋值,因此我们传入函数是也会是隐式赋值,所以结果和上述一样

function foo() {

  console.log(this.a);

}

function doFoo(fn) {

  fn();

}

var obj = {

  a: 2,

  foo: foo

}

var a = 'global';

doFoo(obj.foo); // 'global'

如果把函数传入语言内置的函数而不是自己的函数也是一样的结果.

function foo() {

  console.log(this.a);

}

var obj = {

  a: 2,

  foo: foo

}

var a = 'global';

setTimeout(obj.foo, 1000) // 'global'

javascript环境中内置的函数实现伪代码类似:

function setTimeout(fn, delay) {

  // 等待delay毫秒

  fn(); //调用位置

}

2.3显示绑定

call()、apply()他们第一个参数是一个对象,他们会把这个对象绑定到this,接着调用函数时制定这个this,因为可以直接指定this的绑定对象,因此我们称之为显示绑定。

function foo() {

  console.log(this.a);

}

var obj = {

  a: 2

}

foo.call(obj); // 2

1、硬绑定

创建了函数bar(),并在它的内部手动调用了foo.call(obj),因此强制把foo的this绑定到obj。无论之后如何调用函数bar,他总会手动在obj上调用foo。

这种绑定是一种显示的强制绑定,因此我们称之为硬绑定。

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

硬绑定的典型应用场景是创建一个包裹函数,传入所有的参数并返回接收到的所有值。

function foo(something) {

  console.log(this.a, something);

  return this.a + something;

}

var obj = {

  a: 2

}

var bar = function () {

  return foo.apply(obj, arguments);

}

var b = bar(3); // 2 3

console.log(b); // 5

另一种使用方法是创建一个重复使用的函数

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,用法

function foo(something) {

  console.log(this.a, something);

  return this.a + something;

}

var obj = {

  a: 2

}

var bar = foo.bind(obj); // 2 3

console.log(bar); // 5

 2、API调用"上下文"


function foo(el) {

  console.log(el, this.id);

}

var obj = {

  id: 'winerss'

}

调用foo()时把this绑定到obj

[1,2,3].forEach(foo, obj);  // 1 winerss 2 winerss 3 winerss

3、优先级


显示绑定优先级高于隐式绑定

function foo(params) {

  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绑定比显示绑定优先级高

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

4、绑定例外


 4、1被忽略的this

如果把null undefined 作为this绑定的对象传入call apply或者bind,这些值在调用时会被忽略,应用默认绑定规则

function foo() {

  console.log(this.a);

}

var a = 2;

foo.call(null); // 2

传null使用的情况

function foo(a, b) {

  console.log(`a:${a}, b:${b}`);

}

把数组展开成参数

foo.apply(null, [2,3]); //a: 2, b: 3

var bar = foo.bind(null, 2); // 使用bind()进行柯里化

bar(3); // a: 2,b: 3

总是使用null来忽略this绑定可能产生一些副作用,如果某个函数确实使用了this,(比如第三方库)那默认绑定规则把this绑定到全局导致后果会很严重。

更安全的this

function foo(a, b) {

  console.log(`a:${a}, b:${b}`);

}

我们的DMZ空对象

var obj = Object.create(null);

把数组展开成参数

foo.apply(obj, [2, 3]); // a: 2, b: 3

使用bind进行柯里化

var bar = foo.bind(obj, 2);

bar(3); // a: 2,b :3

推荐阅读更多精彩内容