一、Java中的面向物件與繼承
- 下面代碼中，我們定義了一個小狗類，在類中定義了一個屬性和兩個方法，一個構造方法用于初始化小狗的年齡 age，一個公有方法 say 用于列印，
public class Puppy{
int puppyAge;
public Puppy(age){
puppyAge = age;
}
public void say() {
System.out.println("汪汪汪");
}
}
- 這是一個通用的類，當我們需要一個兩歲的小狗的實體是這樣寫的，這個實體同時具有父類的方法，
Puppy myPuppy = new Puppy(2);
muPuppy.say(); // 汪汪汪
- 以上的類和實體的實作均基于 java 的語法來的，但是相比于相對完善的 java 語法來說，早期的 js 沒有 class 關鍵字啊（以下說 js 沒有 class 關鍵字都是指 ES6 之前的 js ，主要幫助大家理解概念），JS為了支持面向物件，使用了一種比較曲折的方式，具體如下，
二、JS中的面向物件與繼承
- 沒有 class，用函式代替 ：早期的 js 沒有 class 關鍵字，是怎么辦的呢？對，是用函式來代替，函式不僅能執行普通功能，還能當 class 使用，栗子如下，
function Puppy() {}
- 以上代碼實作了一個函式，下面我們就可以生成以上函式的實體了，
建構式本身就是一個函式，與普通函式沒有任何區別，不過為了規范一般將其首字母大寫，建構式和普通函式的區別在于，使用 new 生成實體的函式就是建構式，直接呼叫的就是普通函式，
let myPuppy = new Puppy()
- 函式本身就是建構式 ：雖然我們有了小狗的實體，但是不像 java 語法似的可以在類中定義建構式來不能設定小狗的年齡啊，不慌，其實，充當類使用的函式本身就是建構式，而且它就是默認的建構式，下面我們重寫以上代碼，讓建構式接收函式來初始化小狗的年齡 age ，
// 建構式：可接收引數來初始化屬性值
function Puppy(age) {
this.puppyAge = age
}
// 實體化時可以傳年齡引數了
let myPuppy = new Puppy(2)
- 建構式中的 this 指向實體化物件 ：建構式中的 this 指向需要注意：被作為類使用的函式里面 this 總是指向實體化物件，也就是 myPuppy ，這么設計的目的就是讓使用者可以通過建構式給實體物件設定屬性，這時候列印出來看 myPuppy.puppyAge 就是 2 ，
console.log(myPuppy.puppyAge) // 2
- prototype 上定義實體方法 ：以上 4 點，我們實作了建構式定義以及實體化，java 語法可以直接在類中定義公共方法來讓實體小狗汪汪汪，js 如何辦呢？對此，js 給出的解決方案是給構造方法添加一個
prototype屬性，掛載在這上面的方法，實體化時就會給到實體物件，
// 在建構式的 prototype 上添加方法
Puppy.prototype.say = function() {
console.log("汪汪汪")
}
// 實體物件呼叫相應方法
myPuppy.say() // 汪汪汪
- 實體方法的查找用 proto ：以上可能有的同學就會有疑問了，方法在建構式的
prototype上，實體物件 myPuppy 怎么會找到 say 方法了呢？我們來列印 myPuppy ，
（1）當你訪問一個物件上沒有的屬性時，比如 myPuppy.say，物件會去 __proto__ 查找， __proto__ 的值就等于父類的 prototype, myPuppy.__proto__ 指向了 Puppy.prototype ，
（2）如果你訪問的屬性在 Puppy.prototype 也不存在，那又會繼續往 Puppy.prototype.__proto__ 上找，這時候其實就找到了 Object.prototype 了，Object.prototype 再往上找就沒有了，也就是 null，這其實就是 原型鏈，
- constructor ：
（1）每個實體都有一個 constructor（建構式）屬性，該屬性指向物件本身，
（2）prototype.constructor 是 prototype 上的一個保留屬性，這個屬性就指向類函式本身，用于指示當前類的建構式，
（3）既然 prototype.constructor 是指向建構式的一個指標，那我們是不是可以通過它來修改建構式呢？我們來試試就知道了，我們先修改下這個函式，然后新建一個實體看看效果
function Puppy(age) {
this.puppyAge = age;
}
Puppy.prototype.constructor = function myConstructor(age) {
this.puppyAge2 = age + 1;
}
const myPuppy2 = new Puppy(2);
console.log(myPuppy2.puppyAge); // 2
上例說明，我們修改 prototype.constructor 只是修改了這個指標而已，并沒有修改真正的建構式，
（4）上面我們其實已經說清楚了 prototype，__proto__，constructor 幾者之間的關系，下面畫一張圖來更直觀的看下
- 靜態方法 ：我們知道很多面向物件有靜態方法這個概念，比如 java 直接是加一個 static 關鍵字就能將一個方法定義為靜態方法，js 中定義一個靜態方法更簡單，直接將它作為類函式的屬性就行，
// 在建構式上定義靜態方法 statciFunc
Puppy.statciFunc = function() {
console.log('我是靜態方法，this拿不到實體物件')
}
// 直接通過類名呼叫
Puppy.statciFunc();
- 繼承：面向物件怎么能沒有繼承呢，根據前面所講的知識，我們其實已經能夠自己寫一個繼承了，所謂繼承不就是子類能夠繼承父類的屬性和方法嗎？換句話說就是子類能夠找到父類的
prototype，最簡單的方法就是子類原型的__proto__指向父類原型就行了，
（1）以下繼承方法只是讓 Child 訪問到了 Parent 原型鏈，但是沒有執行 Parent 的建構式
function Parent() {}
function Child() {}
Child.prototype.__proto__ = Parent.prototype;
const obj = new Child();
console.log(obj instanceof Child ); // true
console.log(obj instanceof Parent ); // true
（2）為了解決上述問題，我們不能單純的修改 Child.prototype.__proto__ 指向，還需要用 new 執行下 Parent 的建構式，
function Parent() {
this.parentAge = 50;
}
function Child() {}
Child.prototype.__proto__ = new Parent();
const obj = new Child();
console.log(obj.parentAge); // 50
（3）上述方法會多一個 __proto__ 層級，可以換成修改 Child.prototype 的指向來解決，注意將 Child.prototype.constructor 重置回來，
function Parent() {
this.parentAge = 50;
}
function Child() {}
Child.prototype = new Parent();
// 注意重置constructor
Child.prototype.constructor = Child;
const obj = new Child();
console.log(obj.parentAge); // 50
- 自己實作一個new：結合上面講的，我們知道 new 其實就是生成了一個物件，這個物件能夠訪問類的原型，知道了原理，我們就可以自己實作一個 new 了，
function myNew(func, ...args) {
// 新建一個空物件
const obj = {};
// 執行建構式
func.call(obj, ...args);
// 設定原型鏈
obj.__proto__ = func.prototype;
return obj;
}
function Puppy(age) {
this.puppyAge = age;
}
Puppy.prototype.say = function() {
console.log("汪汪汪");
}
const myPuppy3 = myNew(Puppy, 2);
console.log(myPuppy3.puppyAge); // 2
console.log(myPuppy3.say()); // 汪汪汪
- 自己實作一個 instanceof：知道了原理，其實我們也知道了 instanceof 是干啥的，instanceof 不就是檢查一個物件是不是某個類的實體嗎？換句話說就是檢查一個物件的的原型鏈上有沒有這個類的 prototype ，知道了這個我們就可以自己實作一個了
function myInstanceof(targetObj, targetClass) {
// 引數檢查
if(!targetObj || !targetClass || !targetObj.__proto__ || !targetClass.prototype){
return false;
}
let current = targetObj;
while(current) { // 一直往原型鏈上面找
if(current.__proto__ === targetClass.prototype) {
return true; // 找到了回傳true
}
current = current.__proto__;
}
return false; // 沒找到回傳false
}
// 用我們前面的繼承實驗下
function Parent() {}
function Child() {}
Child.prototype.__proto__ = Parent.prototype;
const obj = new Child();
console.log(myInstanceof(obj, Child) ); // true
console.log(myInstanceof(obj, Parent) ); // true
console.log(myInstanceof({}, Parent) ); // false
三、ES6的 class
ES6 的 class 就是前面說的函式類的語法糖，比如我們的 Puppy 用 ES6 的 class 寫就是這樣
class Puppy {
// 建構式
constructor(age) {
this.puppyAge = age;
}
// 實體方法
say() {
console.log("汪汪汪")
}
// 靜態方法
static statciFunc() {
console.log('我是靜態方法，this拿不到實體物件');
}
}
const myPuppy = new Puppy(2);
console.log(myPuppy.puppyAge); // 2
console.log(myPuppy.say()); // 汪汪汪
console.log(Puppy.statciFunc()); // 我是靜態方法，this拿不到實體物件
使用class可以讓我們的代碼看起來更像標準的面向物件，建構式，實體方法，靜態方法都有明確的標識，但是他本質只是改變了一種寫法，所以可以看做是一種語法糖，如果你去看babel編譯后的代碼，你會發現他其實也是把class編譯成了我們前面的函式類，extends關鍵字也是使用我們前面的原型繼承的方式實作的，
四、總結
-
JS中的函式可以作為函式使用，也可以作為類使用
-
作為類使用的函式實體化時需要使用 new
-
為了讓函式具有類的功能，函式都具有
prototype屬性， -
為了讓實體化出來的物件能夠訪問到
prototype上的屬性和方法，實體物件的__proto__指向了類的prototype，所以prototype是函式的屬性，不是物件的，物件擁有的是__proto__，是用來查找prototype的， -
prototype.constructor指向的是建構式，也就是類函式本身，改變這個指標并不能改變建構式， -
物件本身并沒有
constructor屬性，你訪問到的是原型鏈上的prototype.constructor， -
函式本身也是物件，也具有
__proto__，他指向的是JS內置物件 Function 的原型 Function.prototype ，所以你才能呼叫 func.call, func.apply 這些方法，你呼叫的其實是 Function.prototype.call 和 Function.prototype.apply ， -
prototype本身也是物件，所以他也有__proto__，指向了他父級的prototype，__proto__和prototype的這種鏈式指向構成了JS的原型鏈，原型鏈的最終指向是 Object 的原型，Object上面原型鏈是 null ，即Object.prototype.__proto__ === null， -
另外評論區有朋友提到：
Function.__proto__ === Function.prototype，這是因為JS中所有函式的原型都是 Function.prototype ，也就是說所有函式都是 Function 的實體，Function 本身也是可以作為函式使用的---- Function()，所以他也是 Function 的一個實體，類似的還有Object，Array等，他們也可以作為函式使用: Object(), Array() ，所以他們本身的原型也是Function.prototype，即Object.__proto__ === null Function.prototype，換句話說，這些可以 new 的內置物件其實都是一個類，就像我們的 Puppy 類一樣， -
ES6 的 class 其實是函式類的一種語法糖，書寫起來更清晰，但原理是一樣的，
來源參考：輕松理解JS中的面向物件，順便搞懂prototype和__proto__、
JS 系列二：深入 constructor、prototype、proto、[[Prototype]] 及 原型鏈
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/171050.html
標籤：JavaScript