几句话带你理解JS中的this、闭包、原型链

下面我将为你详细讲解“几句话带你理解JS中的this、闭包、原型链”的完整攻略。

this

在Javascript中，this关键字代表函数执行时的上下文环境，它的值取决于函数被调用时的方式。如果函数是作为对象的方法被调用，this指向该对象，如果函数作为普通函数被调用，this指向全局对象window。

在ES6中，箭头函数使用词法作用域，且绑定了外层函数的this值，所以箭头函数的this值和外层函数的this值一样。

下面给出一个示例代码：

const obj = {
  name: "John",
  sayName: function() {
    console.log(this.name);
  }
}

const func = obj.sayName;
func(); //输出undefined

在这个例子中，sayName()函数中的this指向obj对象。但是在func函数中，this指向全局对象，因为func函数是通过函数表达式被赋值的。因此在执行func()的时候会输出undefined。

闭包

闭包是指有权访问另一个函数作用域中的变量的函数。闭包创建后，闭包内部引用外部作用域变量的过程即为闭包。

下面给出一个示例代码：

function getCounter() {
  let count = 0;
  return function() {
    count++;
    console.log(count);
  }
}

const counter = getCounter();
counter(); //输出1
counter(); //输出2

在这个例子中，getCounter()函数返回的是一个闭包函数，这个闭包函数内部引用了外部作用域中的变量count。每次调用闭包函数的时候，都会访问外部作用域的count变量并执行count++操作。因此在调用counter()函数时会输出1、2、3...依次递增的数字。

原型链

Javascript中的每个对象都有原型(prototype)，原型是一个对象，它的属性和方法可以被对象所继承。如果一个对象无法在自身找到所需的属性或方法，它会从自己的原型中查找，如果还是找不到则会沿着原型链一直向上找。

下面给出一个示例代码：

function Person(name) {
  this.name = name;
}

Person.prototype.sayName = function() {
  console.log(this.name);
}

const john = new Person("John");
john.sayName(); //输出John

在这个例子中，Person函数使用了构造函数的方式去创建一个对象john。该对象的原型为Person.prototype。在Person.prototype上定义了sayName()方法，因此john对象可以通过原型链继承到该方法并调用。在执行john.sayName()方法时会输出John。