javascript 中的原型繼承

時間 2019-11-12

標籤 javascript 原型繼承欄目 JavaScript 简体版

原文原文鏈接

javascript圓形變成的基本規則：javascript

全部數據都是對象；
要獲得一個對象，不是經過實例化類，而是找到一個對象做爲原型並克隆它；
對象會記住它的原型；
若是對象沒法響應某個請求，它會把這個請求委託給它本身的原型；

全部的數據都是對象

在javascript的類型中，分爲兩類：基本類型和複雜類型；

　　　　基本類型包括：undefined、number、boolean、string、null；基本類型能夠經過包裝類的方式變成對象類型數據來處理；java

　　　　複雜類型：object;chrome

　　　　1.1 包裝對象：所謂「包裝對象」，就是分別與數值、字符串、布爾值相對應的Number、String、Boolean三個原生對象。這三個原生對象能夠把原始類型的值變成（包裝成）對象。數組

　　　　1.2 包裝類和基本類型的對應關係:瀏覽器

基本類型	包裝對象
string	String
number	Number
boolean	Boolean

　　　　　　　var v1 = new Number(123);
　　　　　　　var v2 = new String("abc");
　　　　　　 var v3 = new Boolean(true);

　　　　　　　typeof v1;//object
　　　　　　　typeof v2;//object
　　　　　　　typeof v3;//object

　　　　　　　v1 === 123;//false
　　　　　　　v2 === "abc";//false
　　　　　　　v3 ===true;//false
　　　　1.3 Number、String和Boolean若是不做爲構造函數調用（即調用時不加new），經常用於將任意類型的值轉爲數值、字符串和布爾值。
　　　　　1.3.1 Boolean函數類型轉換
　　　　　　　Boolean(undefined);//false
　　　　　　　Boolean(null);//false
　　　　　　　Boolean(0);//false
　　　　　　　Boolean("");//false
　　　　　　　Boolean(NAN);//false

　　　　　　　Boolean(1);//true
　　　　　　　Boolean('false');//true
　　　　　　　Boolean([]);//true
　　　　　　　Boolean({});//true
　　　　　　　Booleam(function(){});//true
　　　　　　　Boolean(/foo/);//true
NumberStringBooleannew

　　　　　　　使用雙重的否運算符（!）也能夠將任意值轉爲對應的布爾值。app

　　　　　　　　!!undefined //false函數

　　　　　　　　!!null //falsethis

　　　　　　　　!!0 //falsespa

　　　　　　　　!!'' //falsefirefox

　　　　　　　　!!NAN //false

　　　　　　　　!!1 //true

　　　　　　　　!!'false' //false

　　　　　　　　!![] //true

　　　　　　　　!!{} //true

　　　　　　　　!!function(){} //true

　　　　　　　　!!/foo/ //true

　　　　　　　最後，對於一些特殊值，Boolean對象前面加不加new，會獲得徹底相反的結果，必須當心

　　　　　1.4 javascript中的根對象是Object.prototype對象；

　　　　　　　　Object.prototype是一個空對象，咱們遇到的每個對象，都是從Object.prototype對象克隆而來的；

　　　　　　　　var obj1 = new Object();

　　　　　　　　var obj2 = {};

　　　　　　　　console.log(Object.getPrototypeOf(obj1) === Object.prototype); //true

　　　　　　　　console.log(Object.getPrototypeOf(obj2) === Object.prototype);//true

　　　　　　　　ECMAScript5提供的Object.getPrototypeOf 來查看對象的原型；

要獲得一個對象，不是經過實例化類，而是找一個對象做爲原型並克隆它

　　　　2.1 在javascript語言裏，咱們並不關心克隆的細節，由於這是引擎內部實現的。咱們所須要的只是顯示地調用var obj = new Object()或者var obj2 = {}。此時，引擎內部會從Object.prototype上克隆一個對象出來，咱們最終獲得的就是這個對象。

　　　　function Person(name){

　　　　　　this.name = name;

　　　　};

　　　　Person.prototype.getName = function(){

　　　　　　return this.name;

　　　　};

　　　　var a = new Person("seven");

　　　　console.log(a.name);//seven

　　　　console.log(a.getName);//seven

　　　　console.log(Object.getPrototypeOf(a) === Person.prototype);//true

　　　　補充解釋：Person並非類，而是構造函數，Javascript的函數既能夠做爲普通函數被調用，也能夠做爲構造器被調用。當時用new運算符來調用函數的時候，此時的函數就是一個構造器。用new運算符來建立對象的過程，實際上也只是先克隆Object.prototype對象，再進行一些其餘額外操做的過程。

　　　　2.2 _proto_屬性

　　　　2.2.1 在chrome和firefox等向外暴露了_proto_屬性的瀏覽器下，咱們能夠經過下面這段代碼來理解new 運算的過程

　　　　function Person(name){

　　　　　　this.name = name;

　　　　};

　　　　Person.prototype.getName = function(){

　　　　　　return this.name;

　　　　}

　　　　var objectFactory -= function(){

　　　　　　var obj = new Object(); //從Object.prototype上克隆一個空對象

　　　　　　var Constructor = [].shift.call(arguments)； //call 的意思是把空數組的方法放到arguments上執行，原來arguments是沒有shift() 方法，如今是把空數組的shift()方法放到 arguments上來執行，因此argument原來的第一個元素的值(Person)。

　　　　　　obj._proto_ = Constructor.prototype; //obj._proto_ = Person.prototype;

　　　　　　var ret =Constructor.apply( obj, arguments)

　　　　　　// Function.apply(obj,args)方法能接收兩個參數

　　　　　　// obj：這個對象將代替Function類裏this對象 (這個對象繼承Function裏的屬性和方法)

　　　　　　// args：這個是數組，它將做爲參數傳給Function（args-->arguments）

　　　　　　return typeoof ret === 'object' ? ret : obj;

　　　　}

　　　　var a = objectFactory(Person, 'seven');

　　　　console.log(a.name);//seven

　　　　console.log(a.getName());//seven

　　　　console.log(Object.getPrototypeOf(a) === Perso.prototype); //true