文章目錄

• • 前端---JavaScript基礎3
  • • 普通對象與函數對象
    • 原型及屬性判斷
    • 構造函數繼承
    • 原型繼承
    • 組合繼承
    • 寄生組合式繼承

前端—JavaScript基礎3

普通對象與函數對象

原型及屬性判斷

構造函數繼承

原型繼承

組合繼承

寄生組合式繼承

//原型是一個對象，其他對象可以通過它實現屬性繼承 //prototype是函數對象才有的屬性 //什么是普通對象？ 函數對象？ //函數 function f() {} console.log(typeof f,f.prototype) var ff = new f() console.log(typeof ff,ff.prototype)//普通對象 var o = {} console.log(typeof o,o.prototype)//什么是原型？ prototype //具體原型寫法 function Person(){}; //定義一個函數對象 Person.prototype.name = "jack"; //原型中添加屬性 Person.prototype.age= 22; var p1 = new Person(); //實例化 var p2 = new Person(); console.log(p1.name)//總結： //1.每一個函數對象都有一個prototype屬性，但是普通對象沒有；prototype下面又有constructor，指向這個函數； //2.每一個對象都有一個_proto_內部屬性，指向它所對應的構造函數的原型對象；

老家比喻原型：（如下圖）

//原型有什么用？ 可以實現特性：繼承 //生成多個實例 缺點：代碼量大，不好組織 var cat1 = {} cat1.name = "大白" var cat2 = {} cat2.name = "小白"//工廠創建多個對象 缺點：不能夠確定類型 function cat(name){return {name:name} } var cat1 = cat("大白") var cat2 = cat("小白") console.log(cat1 instanceof cat) //false//構造函數 缺點：存在方法的重復 代碼冗余 function Cat(name){this.name = name;this.say(){console.log(this.name)} } var cat1 =new Cat("大白") var cat2 =new Cat("小白") console.log(cat1 instanceof Cat) //true//原型優化 把方法移入到原型中，減少實例的代碼 function Cat(name){this.name = name; } Cat.prototype.say = function(){console.log(this.name) } var cat1 =new Cat("大白") var cat2 =new Cat("小白") cat1.say() console.log(cat1 instanceof Cat) //true//屬性檢測 是在對象實例中，還是在原型中 console.log('name' in cat1) //會在原型和實例中找 console.log(cat1.hasOwnProperty('name')) //只會在實例中找//原型應用 繼承 function Animal(){this.type = '動物'; } function Cat(name){this.name= name; } Cat.prototype = new Animal(); var cat1 = new Cat("小綠"); console.log(cat1.name,cat1.type) //構造器 繼承 function Animal(){this.type = '動物'; } function Cat(name){//Animal.apply(this); //調用Animal構造器 this==CatAnimal.call(this); //區別（傳遞參數）：Animal.call(this,xx,yy); Animal.apply(this,[xx,yy]); this.name= name; } var cat1 = new Cat("大綠"); console.log(cat1.type) //組合繼承（原型+構造器） 缺點：調用兩次父類構造器 function Person(name){thos.proLans = ["php","java"];this,name = name; } Person.prototype.showName = function(){console.log(this.name) } function Teacher(name,course){Person.call(this,name);this.course = course; } Teacher.prototype = new Person(); var t1 = new Teacher("aaa","語文"); console.log(t1.course,t1.name,t1.proLans) t1.showName();//原型+構造+寄生 function Person(name){thos.proLans = ["php","java"];this,name = name; } Person.prototype.showName = function(){console.log(this.name) } function Teacher(name,course){Person.call(this,name);this.course = course; } function extends(subObj,superObj){//創建一個空對象，將空對象的原型指向superObj的原型var proObj = Object.create(superObj.prototype); //proObj == 空對象//proObj.constructor = subObj; //手動將constructor指向構造器subObj.prototype = proObj; // subObj == Teacher } extends(Teacher,Person); var t1 = new Teacher("小侯","數學"); console.log(t1.course,t1.name,t1.proLans) t1.showName();

create函數：

function create(o){var f = function(){};f.prototype = o;return new f(); }

總結

以上是生活随笔為你收集整理的前端---JavaScript基础3的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。