關於javascript的原型和原型鏈，看我就夠了（一）

關於js的原型和原型鏈，有人以爲這是很頭疼的一塊知識點，其實否則，它很基礎，不信，往下看
要了解原型和原型鏈，咱們得先從對象提及

建立對象

建立對象的三種方式：

對象直接量

經過對象直接量建立對象,這是最簡單也是最經常使用的建立對象的方式

var empty = {};
var pos = {x:12,y:23};
var pos2 = {x:pos.x,y:pos.y+1};
var author={
    "my name":"陌上寒",//屬性名帶空格，必須用引號包裹
    'article-title':"關於javascript的原型和原型鏈，看我就夠了（一）",//屬性名帶連字符，必須用引號包裹
    "if":"使用保留字做爲屬性名，必須用引號包裹"//使用保留字做爲屬性名，必須用引號包裹
}

經過new建立對象

經過new運算符建立並初始化一個新對象，關鍵字new後跟隨一個函數調用，這個函數成爲構造函數(constructor)，構造函數用來初始化一個新對象，js包含了一些內置的構造函數

var  obj = new Object()//建立一個空對象等同於 var obj = {}
var  arr = new Array()//建立一個空數組等同於 var arr = []
...

上面的Object(),Array(),都是js內置的構造函數
除了內置的構造函數，咱們還可使用自定義構造函數來初始化對象

function fun(){
    console.log("這是一個自定義構造函數")
};
var myObj= new fun();

Object.create()

這個建立對象的方法彷佛有些陌生，它建立一個新對象，包含兩個參數，

第一個，必需。 要用做原型的對象。 能夠爲 null
第二個，可選。 包含一個或多個屬性描述符的 JavaScript 對象

const obj = Object.create({x:1})//obj 繼承了屬性x

const obj2 = Object.create(Object.prototype, {
      foo: {
        writable: true,
        configurable: true,
        value: "hello"
      }
    })
    console.log(obj2);//輸出{foo: "hello"}
const obj3 = Object.create(null)//obj3不繼承任何屬性和方法

建立一個空對象

//如下三種方法等效
var obj1 = {};
var obj2 = new Object()
var obj3 = Object.create(Object.prototype)

今天重點說原型，明天咱們再把Object.create()展開講述
簡單回顧如下，以上就是建立對象的三種方式

• 經過對象直接量
• 經過new建立對象

• 經過Object.create()
  立刻進入正題了，還差一點點

  對象分類

  咱們都知道 JavaScript中萬物皆對象，但對象之間也是有區別的。分爲函數對象和普通對象。

函數對象能夠建立普通對象，(這個咱們上面講過了),回顧一下

function fun(){
    console.log("這是一個自定義構造函數")
};
var myObj= new fun();

普通對象無法建立函數對象，凡是經過new Function建立的對象都是函數對象，其餘都是普通對象（一般經過Object建立），能夠經過typeof來判斷。

function f1(){};
typeof f1 //"function"

var o1 = new f1();
typeof o1 //"object"

var o2 = {};
typeof o2 //"object"

關於函數的建立，注意如下寫法等價

function f1(){}
等價於
var f1 = new Function();

function f21(a,b){
  alert(a+b);
}
f21(1,2)
等價於
var f22 = new Function('a','b',"alert(a+b)");
f22(1,2)

簡單回顧一下
咱們將對象分爲函數對象和普通對象，函數對象的級別要要高於普通對象，能夠經過函數對象建立普通對象，可是沒法經過普通對象建立函數對象
好了，進入正題！

何爲js原型

每個js對象（null除外）都和另外一個對象相關聯，「另外一個」對象就是原型，每個對象都從原型繼承屬性
全部經過對象直接量建立的對象都具備同一個原型對象，能夠經過Object.prototype獲取對原型對象的引用,注意如下代碼

//dmeo1
const obj =new Object()
//等價於 const obj ={}
//等價於const obj = Object.create()
alert(obj.prototype)//undefined
alert(Object.prototype)//[object Object]
//demo2
function fun(){
    console.log("這是一個自定義構造函數")
};
alert(fun.prototype)//[object Object]

看以上代碼，obj 爲普通對象，obj的prototype爲undefined，Object爲js內置構造函數，Object存在prototype
咱們得出如下結論
每個函數對象都有一個prototype屬性，可是普通對象是沒有的；
換個方式再說一遍，只有函數對象纔會存在prototype屬性，普通的對象不存在
還沒結束，看以下代碼

function fun(){
    console.log("這是一個自定義構造函數")
};
console.log(fun.prototype)

輸出：

const obj = {}
console.log(obj.__proto__);

輸出

const str='陌上寒'
console.log(num.__proto__);

輸出

constructor

是構造函數建立的實例的屬性，該屬性的做用是指向建立當前對象的構造函數。（這個不是咱們今天重點要介紹的）

_proto_

這是什麼？根據咱們的console.log，不難發現，函數對象，普通對象，都存在__proto__,這是什麼呢？__proto__和原型鏈有什麼聯繫呢？__proto__指向誰呢？

咱們明天繼續探討js原型和原型鏈，不見不散

原文連接
參考連接
簡單理解js的prototype屬性
基於js中的原型(全面講解)
JS原型與原型鏈的深刻理解
三張圖搞懂JavaScript的原型對象與原型鏈