JS笔记之JS对象基础知识(四)

1 对象方法，this

通常创建对象来表示显示世界中的实体，比如用户或者订单。在现实世界中用户可以进行操作，比如登录注销，往购物车中添加商品。

在JS中行为（action）由属性中的函数表示。

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

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

user.sayHi(); // Hello!

上面的例子中，我们给user对象的sayHi属性赋值了一个函数，这种对象的属性的函数被称为对象的方法。

通常，全局中定义的函数称之为函数，对象中的属性是函数的话称之为方法。

我们在代码中使用对象表示实体时，这就是所谓的面向对象编程，简称OOP。

1.1 方法简写

方法还有一个简写的方式（可能会在继承层面会有些微的差别）

// 这些对象作用一样

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

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

1.2 方法中的this

通常对象的方法可能需要访问对象的其他的属性，为了访问改对象，在方法中可以使用this这个关键字。this的值就是在点之前（object.attr）的这个对象，即调用该方法的对象。例如：

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

  sayHi() {
    // "this" 指的是“当前的对象”
    alert(this.name);
  }

};

user.sayHi(); // John

同样也可以使用这种方式访问到user的name属性：

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

  sayHi() {
    alert( user.name ); // 导致错误
  }

};

但是上述例子有一个明显的问题：如果给user重新赋值，那将访问到错误的对象。

let admin = user;
user = null; // 重写让其更明显

admin.sayHi(); // TypeError: Cannot read property 'name' of null

1.3 this 不受限制

在JS中，this关键字可以用于任何函数，即使他不是对象的方法。下面这样写也不会错误：

1
2
3

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

之所以不回错误，是因为this的值是计算出来的，它取决于代码的上下文。例如，这里相同的函数被分配给两个不同的对象，在调用中有着不同的 “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（使用点符号或方括号语法来访问这个方法，都没有关系。）