SAP Fiori开发中的JavaScript基础知识11 - 数据绑定，this关键字

1. 前言

本文将介绍JavaScript中的this关键字，这是一个相对较难的知识点。

2. 数据绑定

在JavaScript中，"binding"或"variable binding"是指将变量名与变量值关联起来的过程。当你声明一个变量并赋予它一个值时，你就创建了一个新的绑定。这个变量名就绑定到了这个值上。

例如：

let x = 10;

在这个例子中，我们创建了一个新的绑定x，并将它绑定到值10。

3. this关键字

JavaScript中的函数或方法调用时，this关键字的绑定也是一个重要的概念。this的值取决于函数如何被调用。

接下来，让我们一起总结下this关键字的绑定与使用。

在 JavaScript 中，this 是一个特殊的关键字，它引用的是函数运行时的上下文（对象）。

• 每个函数都能访问自己的this对象。

• 在函数外部，我们可以通过this关键字，访问全局对象global object。

• this 的值在函数被调用时才确定，完全取决于函数如何被调用。

• 箭头函数没有自己的 this 值。在箭头函数中，this 的值继承自包含箭头函数的上下文。

3.1 this的默认绑定

默认绑定：在非严格模式下，当一个函数独立调用（即不通过对象或者类调用）时，即直接通过函数名启动函数fnName()，this通常绑定到全局对象（在浏览器中是window）。在严格模式下，this将是undefined。

function test() {
  console.log(this);
}

test();  // 在非严格模式下，输出: Window {...}，在严格模式下，输出: undefined

3.2 this的隐式绑定

隐式绑定：当一个函数通过一个对象调用时，this被绑定到那个对象oObject.fnName()。

this指向当前的对象，因而，对于同一个函数，其在不同对象中引用时，this指向的对象是不同的。

function printValue() {
  console.log(this.value);
}

let obj1 = {
  value: 'Hello',
  print: printValue
};

let obj2 = {
  value: 'World',
  print: printValue
};

obj1.print();  // 输出: Hello
obj2.print();  // 输出: World

3.3 this的显示绑定

显式绑定：使用call或pply方法，可以显式地设置this的值。

也即，在通过函数名启动函数fnName()时，可以通过函数自身的call, apply和bind等方法，来显示指定this所绑定的对象。

let obj = {
  value: 'Hello, world!'
};

function printValue() {
  console.log(this.value);
}

printValue.call(obj);  // 输出: 'Hello, world!'

3.4 this的硬绑定

通过使用bind()方法，可以实现与call()或apply()方法不同的绑定效果。

通过bind()方法，可以实现hard binding，即永久绑定一个特定的this值，无论如何调用函数，该this值都不会改变。

这种绑定方式常用于异步回调和事件处理（在事件处理程序中，this 通常指向触发事件的元素）

下面是一个示例：

// 创建一个对象
let person = {
  name: 'John'
};

function greeting() {
  console.log(`Hello, ${this.name}!`);
}

// 使用bind()方法将greeting函数的this值永久绑定为person对象
let boundGreeting = greeting.bind(person);

// 调用boundGreeting函数
boundGreeting(); // 输出: Hello, John!

在这个示例中，通过使用bind()方法，将greeting函数绑定为boundGreeting函数，并且永久将其this值绑定为person对象。因此，无论如何调用boundGreeting函数，其this值始终指向person对象。

3.5 this的new绑定

new绑定：当一个函数被new关键字作为构造函数调用时，this被绑定到新创建的对象。

此时，this会被设置成一个权限的空对象，这个空对象会被分配到原型链上（如果函数有返回值，返回值会被忽略）。

function MyObject() {
  this.value = 'Hello, world!';
  this.printValue = function() {
    console.log(this.value);
  };
}

let obj = new MyObject();

obj.printValue();  // 输出: 'Hello, world!'

3.6 箭头函数绑定

箭头函数绑定：箭头函数不会创建自己的this，它只会从自己的作用域链上一层继承this。

let obj = {
  value: 'Hello, world!',
  printValue: function() {
    setTimeout(() => {
      console.log(this.value);  // this指向obj
    }, 1000);
  }
};

obj.printValue();  // 输出: 'Hello, world!'

4. 小结

本文介绍了JavaScript中数据绑定的原理，并着重介绍了this关键字的用法。希望对你有帮助！