关于JS中的this

2017-05-18  本文已影响0人  _july77

与其他语言相比，函数的 this 关键字在JavaScript中的行为略有不同。它在严格模式和非严格模式之间也有一些区别。
在绝大多数情况下，函数的调用方式决定了this的值。this不能在执行期间被赋值，在每次函数被调用时this的值也可能会不同。ES5引入了bind方法来设置函数的this值，而不用考虑函数如何被调用的。

全局上下文

console.log(this.document === document); // true
// 在浏览器中，全局对象为 window 对象：
console.log(this === window); // true
this.a = 37;
console.log(window.a); // 37

函数上下文

1.直接调用
如果不是在严格模式下执行，并且this的值不会在函数执行时被设置，此时的this的值会默认设置为全局对象。

function f1(){
  return this;
}

this === window; // true

然而，在严格模式下，this将保持他进入执行环境时的值，所以直接调用的this将会默认为undefined或者报错

function f2(){
  "use strict"; // 这里是严格模式
  return this;
}

this === undefined; // true

2.对象方法中的 this
当以对象里的方法的方式调用函数时，它们的 this 是调用该函数的对象.

var o = {
  prop: 37,
  f: function() {
    return this.prop;
  }
};

console.log(o.f()); //  37

or

var o = {prop: 37};

function independent() {
  return this.prop;
}

o.f = independent;

console.log(o.f()); // logs 37

3.原型链中的 this
相同的概念在定义在原型链中的方法也是一致的。如果该方法存在于一个对象的原型链上，那么this指向的是调用这个方法的对象，表现得好像是这个方法就存在于这个对象上一样。

var o = {
  f : function(){ 
    return this.a + this.b; 
  }
};
var p = Object.create(o);
p.a = 1;
p.b = 4;

console.log(p.f()); // 5

4.getter 与 setter 中的 this
作为getter或setter函数都会绑定 this 到从设置属性或得到属性的那个对象。

function modulus(){
  return Math.sqrt(this.re * this.re + this.im * this.im);
}

var o = {
  re: 1,
  im: -1,
  get phase(){
    return Math.atan2(this.im, this.re);
  }
};

Object.defineProperty(o, 'modulus', {
  get: modulus, enumerable:true, configurable:true});

console.log(o.phase, o.modulus); // logs -0.78 1.4142

5.构造函数中的 this
当一个函数被作为一个构造函数来使用（使用new关键字），它的this与即将被创建的新对象绑定。

var Obj = function (p) {
  this.p = p;
};

Obj.prototype.m = function() {
  return this.p;
};

var o = new Obj('Hello World!');

o.p // "Hello World!"
o.m() // "Hello World!"

call 和 apply，bind 方法

  1. ECMAScript 5 引入了 Function.prototype.bind
    调用f.bind(someObject)会创建一个与f具有相同函数体和作用域的函数，但是在这个新函数中，this将永久地被绑定到了bind的第一个参数，无论这个函数是如何被调用的。
    bind比call方法和apply方法更进一步的是，除了绑定this以外，还可以绑定原函数的参数。
function.prototype.bind()
function f(){
  return this.a;
}

var g = f.bind({a:"azerty"});
console.log(g()); // azerty

var o = {a:37, f:f, g:g};
console.log(o.f(), o.g()); // 37, azerty

bind比call方法和apply方法更进一步的是，除了绑定this以外，还可以绑定原函数的参数。

2.当一个函数的函数体中使用了this关键字时，通过所有函数都从Function对象的原型中继承的call()方法和apply()方法调用时，它的值可以绑定到一个指定的对象上。

call方法的参数，应该是一个对象。如果参数为空、null和undefined，则默认传入全局对象。
var n = 123;
var obj = { n: 456 };

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

a.call() // 123
a.call(null) // 123
a.call(undefined) // 123
a.call(window) // 123
a.call(obj) // 456

call方法还可以接受多个参数
func.call(thisValue, arg1, arg2, ...)
call的第一个参数就是this所要指向的那个对象，后面的参数则是函数调用时所需的参数。

3.function.prototype.apply()
apply方法的作用与call方法类似，也是改变this指向，然后再调用该函数。唯一的区别就是，它接收一个数组作为函数执行时的参数，使用格式如下。

func.apply(thisValue, [arg1, arg2, ...])

apply方法的第一个参数也是this所要指向的那个对象，如果设为null或undefined，则等同于指定全局对象。第二个参数则是一个数组，该数组的所有成员依次作为参数，传入原函数。原函数的参数，在call方法中必须一个个添加，但是在apply方法中，必须以数组形式添加。

function f(x,y){
  console.log(x+y);
}

f.call(null,1,1) // 2
f.apply(null,[1,1]) // 2

DOM事件处理函数中的 this

// 被调用时，将关联的元素变成蓝色
function bluify(e){
  console.log(this === e.currentTarget); // 总是 true

  // 当 currentTarget 和 target 是同一个对象是为 true
  console.log(this === e.target);        
  this.style.backgroundColor = '#A5D9F3';
}

// 获取文档中的所有元素的列表
var elements = document.getElementsByTagName('*');

// 将bluify作为元素的点击监听函数，当元素被点击时，就会变成蓝色
for(var i=0 ; i<elements.length ; i++){
  elements[i].addEventListener('click', bluify, false);
}

内联事件处理函数中的 this

<button onclick="alert(this.tagName.toLowerCase());">
  Show this
</button>

上面的alert会显示button

其实，几句话就可以概括，实践中记住这几点就可以了，偷了几句学霸的总结：


this在函数执行时才能确定，JavaScript 中的 this 可以显式的确定，比如通过call apply bind 以及尚未纳入标准的函数绑定运算符::。 
确认this具体是什么有三个办法：

console.log(this)
source code, look for .call
API documentation
面试的时候，不能 log，没有文档，源码又没有用 call 之类的显式的确定，就需要自己手动的转换成fn.call(...)调用的方式来确定 this 
PS: 需要注意的是箭头函数函数体内的this，就是定义时所在的对象，而不是使用时所在的对象。
上一篇 下一篇

猜你喜欢

热点阅读