细解javascript中的this关键字

JavaScript函数中的this指向并不是在函数定义的时候确定的，而是在调用的时候确定的。换句话说，函数的调用方式决定了this指向。

一、全局上下文

在函数外部，无论是否在严格模式下，this都会指向全局对象window。

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

二、函数上下文

在函数内部，this的值取决于函数是如何调用的。谁调用函数，this就指向谁。

1、直接调用（默认绑定）：未定义this值。

A、在非严格模式下，this指向全局对象window或global。

function test(){
return this;
}
test() === window; // true

function test(){
this.x=1;
alert(this.x);
}
test();

var x=1;
function test(){
alert(this.x);
}
test();

var x=1;
function test(){
this.x=0;
}
test();
alert(x);

B、在严格模式下，this指向undefined。

function test(){
 "use strict"; // 这里是严格模式
  return this;
}
test() === undefined; // true

2、对象方法中的this（隐式绑定）：this指向对象。

当以对象里的方法的方式调用函数时，此时this指向调用该函数的对象。

var o = {
  age: 20,
  func: function() {
    return this.age;
  }
};
console.log(o.func()); // 20，this指向o

A、原型链中的this

如果该方法存在于一个对象的原型链上，那么this指向调用这个方法的对象。

var o = {
  func: function(){
    return this.a + this.b;
  }
};
var p = Object.create(o);
p.a = 1;
p.b = 4;
//对象p没有自己的func属性，它的func属性继承自它的原型。
console.log(p.func()); // 5，this指向p

B、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); // -0.78 1.4142

3、构造函数中的this（new绑定）：this指向新对象。

所谓构造函数，就是通过这个函数生成一个新对象。

function test(){
　　this.x = 1;
}
var o = new test();
alert(o.x); 

function test(){
this.x = 1;
return {x : 2};
}
var o = new test();
alert(o.x);

4、call和apply（显式绑定）：this指向对象。

apply()是函数对象的一个方法，它的作用是改变函数的调用对象，它的第一个参数就表示改变后的调用这个函数的对象。因此，this指的就是这第一个参数。apply()的参数为空时，默认调用全局对象。

var x = 0;
function test(){
　　alert(this.x);
}
var o = {};
o.x = 1;
o.m = test;
o.m.apply(); //0，this指向全局
o.m.apply(o); //1，this指向o

function add(c, d){
  return this.a + this.b + c + d;
}
var o = {a:1, b:3};
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

使用call和apply函数的时候要注意，如果传递的this不是一个对象，JavaScript将会尝试使用内部ToObject操作将其转换为对象。7通过new Number(7)转化为对象，'foo'通过new String('foo') 转化为对象。

function bar() {
  console.log(Object.prototype.toString.call(this));
}
bar.call(7); // [object Number]

5、bind方法：this指向bind的第一个参数。

function test(){
  return this.a;
}
var nt = test.bind({a:"textstring"});
console.log(nt()); // textstring
var o = {a:20, f: test, g:nt};
console.log(o.f(), o.g()); // 20, textstring

6、dom事件处理函数中的this：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);
}

7、内联事件处理函数中的this：this指向DOM元素。

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

<button onclick="alert((function(){return this})());">
没有设置内部函数的this，this指向window，即非严格模式下调用的函数未设置this时指向的默认对象。
</button>

秒客网

细解javascript中的this关键字

相关文章