摘要:創建對象的方法字面量優點簡單方便缺點每創建一個對象都要重新寫,且創建多個比較占內存工廠模式優點改善了字面量方法創建多個相似對象的問題,不需要編寫重復的代碼缺點沒有解決對象是別的問題,不知道對象的類型是什么構造函數模式優點創建并定義了對象類型
創建對象的方法
1.字面量
// 優點:簡單方便 // 缺點:每創建一個對象都要重新寫,且創建多個比較占內存 var obj1 = { name: "liuhui1" }; var obj2 = new Object({ name: "liuhui2" }); var obj3 = Object.create({ name: "liuhui3" });
2.工廠模式
// 優點:改善了字面量方法創建多個相似對象的問題,不需要編寫重復的代碼 // 缺點:沒有解決對象是別的問題,不知道對象的類型是什么 function person () { var obj = new Object(); obj.name = "liuhui4"; obj.sayName = function () { console.log(this.name); }; return obj; } var obj4 = person(); console.log(obj4.sayName());
3.構造函數模式
// 優點:創建并定義了對象類型的屬性和方法,可以標示為特定的類型(自定義構造函數,原生:Object/Array) // 缺點:方法沒有被共享,每次實例一個對象都要重復綁定一個獨立的方法 function Person (name) { this.name = name; this.sayName = function () { console.log(this.name); }; this.newFun = newFun; } // 解決辦法:將方法寫在全局,但是就變成全局方法了跟封裝的觀念相違背了 // 新增代碼 function newFun () { console.log("new name: " + this.name); } var obj5 = new Person("liuhui5"); console.log(obj5.sayName());
4.原型模式
// 優點:將方法封裝到相應的原型對象上,私有并實例可以共享這些屬性和方法 // 缺點:所有屬性和方法都共享了,改變實例的屬性和方法會影響原型對象上的屬性和方法 function Person1 () { } Person1.prototype = { constructor: Person1, name: "liuhui6", sayName: function () { console.log(this.name); } }; var obj6 = new Person1(); console.log(obj6.sayName());
5.組合模式(構造函數+原型模式)還沒有完全理解
// 優點:構造函數用于定義實例屬性和方法,原型模式用于共享定義的屬性和方法 function Person2 (name) { this.newName = function () { console.log(name); } } Person2.prototype = { constructor: Person2, name: "liuhui7", sayName: function () { console.log(this.name); } }; var obj7 = new Person2(); var obj8 = new Person2("liuhui8");繼承的方法
1.借助構造函數實現繼承
// 缺點:父級構造函數屬性和方法沒有被共享 function Parent1 () { this.name = "parent1"; this.play = [1, 2, 3]; } function Child1 () { Parent1.call(this); // 關鍵:執行父級構造函數,深復制 this.type = "child1"; } Parent1.prototype.say = function () { console.log("hello1"); }; console.log(new Child1()); var s1 = new Child1(); var s2 = new Child1(); s1.play.push(4); console.log(s1.play, s2.play, s1.hasOwnProperty("play"), "test1");
2.借助原型鏈實現繼承
// 缺點:原型鏈上的屬性和方法是共享 function Parent2 () { this.name = "parent2"; this.play = [1, 2, 3]; } function Child2 () { this.type = "child"; } Parent2.prototype.say = function () { console.log("hello2"); }; Child2.prototype = new Parent2(); // 關鍵:將子級執行父級構造函數實現繼承,淺復制 console.log(new Child2(), new Child2().say()); var s3 = new Child2(); var s4 = new Child2(); s3.play.push(4); console.log(s3.play, s4.play, s3.hasOwnProperty("play"), "test2");
3.組合方式
// 缺點:父級構造函數執行了兩遍 function Parent3 () { this.name = "parent3"; this.play = [1, 2, 3]; } function Child3 () { Parent3.call(this); // 關鍵1 this.type = "child3"; } Parent3.prototype.say = function () { console.log("hello3"); }; Child3.prototype = new Parent3(); // 關鍵2 var s5 = new Child3(); var s6 = new Child3(); s5.play.push(4); console.log(s5, s6, s5.hasOwnProperty("play"), "test");
4.組合方式優化1
// 缺點:實例屬性constructor指向父級構造函數,使用instanceof不能正確判斷對象類型 function Parent4 () { this.name = "parent4"; this.play = [1, 2, 3]; } function Child4 () { Parent4.call(this); this.type = "child4"; } Parent4.prototype.say = function () { console.log("hello4"); }; Child4.prototype = Parent4.prototype; Child4.prototype.constructor = Child4; // 新增代碼,讓實例指向其真實的構造函數 var s7 = new Child4(); var s8 = new Child4(); s7.play.push(4); console.log(s7, s8); // 判斷是子原型Child4實例化還是Parent4直接實例化的 console.log(s7 instanceof Child4, s8 instanceof Parent4); // 判斷不了 console.log(s7.constructor, s8.constructor, s7.hasOwnProperty("play"), "test");
5.組合方式優化2
function Parent5 () { this.name = "parent5"; this.play = [1, 2, 3]; } function Child5 () { Parent5.call(this); this.type = "child5"; } Parent5.prototype.say = function () { console.log("hello5"); }; Child5.prototype = Object.create(Parent5.prototype); Child5.prototype.constructor = Child5; var s9 = new Child5(); var s10 = new Child5(); s9.play.push(4); console.log(s9 instanceof Child5, s9 instanceof Parent5); console.log(s9.constructor, s10.constructor, s9.hasOwnProperty("play"), "test11");參考
構造函數的繼承
非構造函數的繼承
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/88631.html
摘要:更形象的我們還可以將面向對象理解為一種宗教信仰。這就導致面向對象教的程序員們在寫時就很難受。所以為了滿足信仰面向對象教的需求通過構造函數的形式模擬了偽類。這個套路的核心就是類那么里沒有類所以其實是通過構造函數來模擬的偽類。 JS面向對象之一 【概述】 在學習JS的面向對象之前,我們應該先自問這樣幾個問題: 面向對象是什么意思? 學習面向對象的核心是什么? 為什么要學習面向對象?(它的...
摘要:是完全的面向對象語言,它們通過類的形式組織函數和變量,使之不能脫離對象存在。而在基于原型的面向對象方式中,對象則是依靠構造器利用原型構造出來的。 JavaScript 函數式腳本語言特性以及其看似隨意的編寫風格,導致長期以來人們對這一門語言的誤解,即認為 JavaScript 不是一門面向對象的語言,或者只是部分具備一些面向對象的特征。本文將回歸面向對象本意,從對語言感悟的角度闡述為什...
摘要:面向過程函數式編程面向對象編程第二個并不是大家理解的那樣,我們先說舉個現實例子就明白了。多說一句函數是編程是非常強大也是我最喜歡的,以后再說,我們先說面向對象編程。 概述 當大家已經把js的語言基礎理解了,然后能夠寫出一些簡單的例子了,這個時候基本上達到了一年工作經驗的水平,而自己能夠獨立的寫一些小功能,完成一些小效果,或者臨摹修改一些比較復雜的插件的時候差不多就是兩年工作經驗的水平,...
摘要:對象重新認識面向對象面向對象從設計模式上看,對象是計算機抽象現實世界的一種方式。除了字面式聲明方式之外,允許通過構造器創建對象。每個構造器實際上是一個函數對象該函數對象含有一個屬性用于實現基于原型的繼承和共享屬性。 title: JS對象(1)重新認識面向對象 date: 2016-10-05 tags: JavaScript 0x00 面向對象 從設計模式上看,對象是...
摘要:自己的理解的第一個參數就是的值如果沒用默認是那個調用函數的當前的對象在全局作用域中就是被隱藏的所以不寫且在全局作用于調用函數的時候就是可以使用或者自己指定的指向 JS面向對象一:MVC的面向對象封裝 MDNjavascript面向對象 面向對象(Object-Oriented) showImg(https://segmentfault.com/img/remote/1460000016...
閱讀 4391·2021-11-19 09:59
閱讀 3320·2021-10-12 10:12
閱讀 2631·2021-09-22 15:25
閱讀 3321·2019-08-30 15:55
閱讀 1183·2019-08-29 11:27
閱讀 1463·2019-08-28 18:06
閱讀 2736·2019-08-26 13:41
閱讀 2554·2019-08-26 13:41