如何理解js的面相對象？

以蕭井陌的代碼為樣本 我看過他的直播 非常好 但是到了後期他寫的面相對象我已經完全看不懂了 各種this已經繞暈 如何理解代碼里各種this的指向 百度過this的使用方式 但是像蕭井陌的代碼 很多類 已經暈了 我想問下 大家有沒有好的辦法分辨？這是蕭井陌的代碼地址https://github.com/guaxiao/gua.game.js

---

謝邀，所謂「面相對象」，就是「看面相來找對象」的意思：

function Person(face){
this.face = face
}

Person.prototype.mate = function(anotherPerson){
if(anotherPerson.face == "good"){
console.log("Crush!")
}else{
console.log("Go away!")
}
}

function Boy(face){
Person.apply(this, arguments) // Constructor Stealing
}

function Girl(face){
Person.apply(this, arguments)
}

// Inherit prototype
// one less constructor call than Boy.prototype = new Person()
Boy.prototype = Object.create(Person.prototype)
Girl.prototype = Object.create(Person.prototype)

// Correct constructor [optional]
Boy.prototype.constructor = Boy
Girl.prototype.constructor = Girl

// Inherit Statical Members [optional]
// 1st way: traversing all statical members
// 2nd way: set __proto__ pointer
Object.setPrototypeOf(Boy, Person)
Object.setPrototypeOf(Girl, Person)

// Test
new Boy("good").mate(new Girl("good")) // Crush!
new Girl("good").mate(new Boy("good")) // Crush!

new Boy("ugly").mate(new Girl("good")) // Crush!
new Girl("good").mate(new Boy("ugly")) // Go away!


題主你懂了嗎？

---

建議買一本精通avascript看看，裡面對this的解釋非常詳細。

蕭大的那個直播目的是教人一些編程理念，並不是語法教學。所以你想看的懂直播，自己也要學習一下js。

面相對象編程，嗯，題主顏值肯定高

---

this的指向問題，大概幾種情況：

1.指向window

var color = "red";
console.log(window.color); //"red"
console.log(this.color); //"red"


在ajax的回調函數中、定時器的回調函數中，若沒有特殊的調用或者指定，其函數內部的this也都指向window

2.指向對象

var obj = new Object();
obj = {
name:"Timmy",
age:22,
getName:function(){
return this.name;
}
};
obj.getName(); //"Timmy"


這裡的這個this指向的是這個對象本身,我們可以更改這個指向：

var obj = new Object();
obj = {
name:"Timmy",
age:22,
getName:function(){
return this.name;
}
};
var newObj = new Object();
newObj.name = "Lily";
obj.getName.call(newObj); //"Lily"


3.構造函數中使用this

function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.getName = function(){
return this.name;
}
var per1 = new Person("Timmy",22);
per1.getName(); //"Timmy"


這個情況就有一點複雜，使用new操作符調用構造函數時，可以大致理解為下面的過程（示例代碼中，...args為剩餘參數。）：

function trivalNew(constructor,...args){
var o = new Object();
constructor.apply(o,args);
return o;
}
//於是構造函數的實例可以這樣寫：
var per2 = trivalNew(Person,"Timmy",22);


注意：這段代碼當中不能表述new操作符的全部實現過程，原型上的東西沒有考慮，僅用於示意this指向等問題！

這樣就可以理解構造函數中的this的指向了。

---

不請自來。 以前也是被this和各種概念搞得頭疼。 希望能給題主一點幫助。

首先我們要了解什麼是面向對象，什麼是面向過程。（寫遊戲肯定是面向對象，封裝對象類，實例調用）

然後我們根據實際的場景來判斷this指向的是誰。

可以參考Javascript的this用法 - 阮一峰的網路日誌

---

看代碼寫得很一般啊。

用了class，卻很少用arrow function和let/const；

沒有用模塊系統可以理解（畢竟瀏覽器不原生支持需要babel），但沒用的話也要盡量避免污染全局對象吧。

自己做做玩玩沒問題，作為教育新人的代碼這樣不是很好。

---

推薦閱讀：