3-JS-对象-对象方法，this

对象方法，“this”

let user = {
  name: "John",
  age: 30
};

方法示例：

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("Hello!");
};

user.sayHi(); // Hello!

使用预先声明的函数作为方法

let user = {
  // ...
};

// 首先，声明函数
function sayHi() {
  alert("Hello!");
};

// 然后将其作为一个方法添加
user.sayHi = sayHi;

user.sayHi(); // Hello!

方法简写

一种更短的声明方法

// 这些对象作用一样

user = {
  sayHi: function() {
    alert("Hello");
  }
};

// 方法简写看起来更好，对吧？
let user = {
  sayHi() { // 与 "sayHi: function()" 一样
    alert("Hello");
  }
};

方法中的 this

实际上是调用该方法的对象。

let user = {
  name: "John",
  age: 30,

  sayHi() {
    // "this" 指的是“当前的对象”
    alert(this.name);
      
    //或者
    alert(user.name);
    //这种方法不可靠，因为我们如果把 user 复制给另一个变量，那么就会访问到错误的对象。
  }

};

user.sayHi(); // John

this 不受限制

function sayHi() {
  alert( this.name );
}

这样的代码是没有错误的，因为 this 的值是在代码运行时计算出来的，取决于代码上下文。

举例：

let user = { name: "John" };
let admin = { name: "Admin" };

function sayHi() {
  alert( this.name );
}

// 在两个对象中使用相同的函数
user.f = sayHi;
admin.f = sayHi;

// 这两个调用有不同的 this 值
// 函数内部的 "this" 是“点符号前面”的那个对象
user.f(); // John（this == user）
admin.f(); // Admin（this == admin）

admin['f'](); // Admin（使用点符号或方括号语法来访问这个方法，都没有关系。）

**注意：**在没有对象的情况下调用：this == undefined

function sayHi() {
  alert(this);
}

sayHi(); // undefined

在这种情况下，严格模式下的 this 值为 undefined。如果我们尝试访问 this.name，将会报错。

箭头函数没有自己的 this

举例：

这里的 arrow() 使用的 this 来自于外部的 user.sayHi() 方法：

let user = {
  firstName: "Ilya",
  sayHi() {
    let arrow = () => alert(this.firstName);
    arrow();
  }
};

user.sayHi(); // Ilya