Javascript中神奇的this

Javascript中神奇的this攻略

在Javascript中，this是一个非常重要的概念。它代表了当前函数执行的上下文。但是，由于其特殊的语法规则与行为，经常会导致混乱和错误。在此，我们将讨论Javascript中神奇的this及其使用攻略。

常见的this绑定规则

在Javascript中，this的绑定有四种方法，它们分别是：

1. 默认绑定规则：当一个函数被单独调用时，this指向全局对象（在浏览器中是window对象）。例如：

function demo() {
  console.log(this);
}
demo(); // Window

1. 隐式绑定规则：当一个函数作为对象的方法调用时，this指向该对象。例如：

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

1. 显式绑定规则：通过函数的apply()或call()方法将this绑定到指定的对象上。例如：

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

var obj = { a: 1 };

demo.call(obj); // 1

1. new绑定规则：当一个函数用new关键字调用时，this指向新创建的对象。例如：

function Demo() {
  this.a = 1;
}

var obj = new Demo();
console.log(obj.a); // 1

优先级和常见错误

在多个规则同时适用时，this的绑定优先级以以下顺序为准:

1. new绑定
2. 显式绑定
3. 隐式绑定
4. 默认绑定

以下是一些常见的带来错误的this使用情况：

var obj1 = {
  a: 1,
  demo: function() {
    console.log(this.a);
  }
};

var obj2 = { a: 2 };

obj1.demo.call(obj2); // 2

在这个例子中，虽然demo是obj1的方法，但是obj1.demo()提供的上下文被修改为obj2。这是显式绑定的结果。

var obj1 = {
  a: 1,
  demo: function() {
    console.log(this.a);
  }
};

var demo1 = obj1.demo;

var obj2 = { a: 2 };

demo1(); // undefined

在这个例子中，demo1变量保存了obj1.demo的引用，并赋给了全局变量。在全局环境中，this指向默认对象（window对象）。因此，它输出undefined。

神奇的this的使用技巧

以下是一些神奇的使用技巧，帮助你更好地使用this。

1. 使用bind()

bind()是函数的方法，允许你指定this。例如：

var obj = { a: 1 };

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

var boundDemo = demo.bind(obj);

boundDemo(); // 1

在这个例子中，我们使用bind()创建了一个新的函数，在其中this指向了obj。

1. 使用箭头函数

在箭头函数中，this绑定了定义时的上下文，而不是执行时的上下文。例如：

var obj1 = {
  a: 1,
  demo: function() {
    var demo2 = () => {
      console.log(this.a);
    }
    demo2();
  }
}

var obj2 = { a: 2 };

obj1.demo.call(obj2); // 1

在这个例子中，我们定义了一个箭头函数demo2()，它使用了demo()定义时的上下文（即obj1）。

总结

了解并正确使用this是成为一名JavaScript程序员的关键。要记住在使用时了解this的默认规则和使用优先级，同时，使用箭头函数和bind（）方法也是一个不错的选择。