前端學習一原型
阿新 • • 發佈：2018-11-17
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>原型</title> <script> window.onload = function(){ //js皆物件？ //js分為兩大類：原始值+物件。 //物件有區別：函式物件與普通物件 //1 函式物件 //函式物件就是通過new function（）創造的 //如: function f(){};//等同於 var f= new function(); typeof f;//結果是function型別 //2 普通物件 var a={};//等同於 var a = new Object() typeof a;//結果是object型別; //3 示例屬於普通物件。 function f1(){}; var f2 = new f1(); typeof f1;//結果是object型別 // 每一個函式物件都有一個prototype屬性，而普通物件沒有。 // 屬性名.propotype.屬性； // 例項化.propotype.屬性; //constructor屬性 //prototype下面有construtor等屬性 //函式物件建立後包含Prototype，prototype中包含constructor //constructor指向ff function ff(){};//空的函式物件 ff.prototype.name = 'aa';//將name，age放到原型裡面了 ff.prototype.age = '22'; var ff1 = new ff(); var ff2 = new ff(); //例項化ff1,ff2裡面不包含prototype，但是包含--proto--，而proto指向prototype ff1.name; ff2.age; //為什麼需要原型？？？？？？？ //例 建立一個空物件； var cat1 ={}; cat1.name = '大名'; cat1.color='藍色'; var cat2 ={}; cat1.name = '大名'; cat1.color='藍色'; //數量一多就需要建立很多次，這時需要封裝 function Cat(name,color){//這是一個普通函式（不是建構函式） return{ name:name, color:color } }; var cat1 = Cat("大明","黃色"); var cat2 = Cat("小明","黃色"); cat1.name;// //建構函式也是普通函式，但是多了一個this變數 function Cat(name,color){//這是一個建構函式 this.name=name, this.color=color }; var cat1 = new Cat("大明","黃色"); var cat2 = new Cat("小明","黃色"); cat1.name;// function Cat(name,color){//這種做法影響效率，還浪費記憶體，因為你每建立一個cat1裡面的資料就會複製一份。此時prototype就登場了，往下看。 this.name=name, this.color=color, this.typr='動物', this.eat = function(){ console.log('吃肉'); } }; var cat1 = new Cat("大明","黃色"); var cat2 = new Cat("小明","黃色"); //prototype上場了 function Cat(name,color){ this.name=name, this.color=color }; Cat.prototype.type='動物'; Cat.prototype.eat = function(){ console.log('吃肉'); }; var cat1 = new Cat("大明","黃色"); var cat2 = new Cat("小明","黃色"); //此時無論你有多少個cat1、cat2.....type與eat只有一個，因為它們處於公共區域中。 //prototype 驗證屬性的存在與否 function Cat(name,color){ this.name=name, this.color=color }; Cat.prototype.type='動物'; Cat.prototype.eat = function(){ console.log('吃肉'); }; var cat1 = new Cat("大明","黃色"); var cat2 = new Cat("小明","黃色"); //in 分不出這個被驗證的屬性是來自於自身的還是來自於繼承的還是來自於propotype console.log('name' in cat1);//true console.log('type' in cat1);//true //hasOwnproporty 可以 console.log(cat1.hasOwnProperty('name'));//true console.log(cat1.hasOwnProperty('type'));//false //層級關係，當在自己的屬性裡找不到你要找的東西時才會進入原型中。 function Cat(name,color){ this.name=name, this.color=color }; Cat.prototype.name='動物'; var cat1 = new Cat("大明","黃色"); //此時name的值大明； //建構函式的繼承 function Animal(){///動物物件 this.name='動物'; }; function Cat(name,color){ // 貓物件 this.name=name, this.color=color }; //關聯兩個建構函式 //apply(this,arr[]) call() 在一個物件中呼叫另一個物件 //區別 引數不同 apply 傳輸組(有就寫沒有可以不寫) call 一個個傳 function Cat(name,color){ // 貓物件 Animal.apply(this);//將父物件的建構函式繫結到子函式，this只當前的作用域 this.name=name, this.color=color }; var cat1 = new Cat("大明","黃色"); console.log(cat1.type);//此時便於Animal有關聯了 //prototype省了記憶體，更優 //1 function Animal(){///動物物件 this.name='動物'; }; function Cat(name,color){ // 貓物件 this.name=name, this.color=color }; Cat.prototype = new Animal(); console.log(cat1.type);//此時便於Animal有關聯了 //2 直接繼承 function Animal(){///動物物件 // this.name='動物'; }; Animal.prototype.type = '動物'; function Cat(name,color){ // 貓物件 this.name=name, this.color=color }; Cat.prototype = Animal.prototype; // console.log(cat1.type);//此時便於Animal有關聯了 //但是第二種方法有一個不好的地方Cat.prototype與Animal.prototype指向同一個物件 function Animal(){ }; Animal.prototype.type = '動物'; function Cat(name,color){ this.name=name, this.color=color }; Cat.prototype = Animal.prototype; Cat.prototype.aaa='aaa'; console.log(Animal.prototype); //此時列印結果是{type:"動物",aaa:"aaa",constructor:f} } </script> </head> <body> </body> </html>