js裡面的幾種模式
阿新 • • 發佈：2019-01-11
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>工程模式</title> </head> <body> <script type="text/javascript"> //工廠模式 function createPerson(name,age,job){ var o = new Object(); o.name=name; o.age=age; o.job = job; o.sayName = function(){ console.log(this.name); }; return o; } var person1 = createPerson("one",29,"soft"); var person2 = createPerson("two",30,"shu jvku"); person1.sayName(); person2.sayName(); //對於工廠模式來說，裡面不好的一點就是不能解決其中的物件識別的問題(原因就是兩個person都是繼承object的，對於建構函式來說就是我們自己定義的新型別，這裡不僅僅說是其中的繼承object更是繼承我們自己定義的物件，更容易識別) //建構函式的模式 function Person(name,a){ this.name=name; this.a = a; // this.sayName = sayName; this.sayName = function(){ console.log(this.name); } } // function sayName(){ // console.log(this.name); // } var person3 = new Person("liy",[1,2]); person3.sayName(); console.log(person3.name); var person4 = new Person("zhang",[1,2]); console.log(person4.sayName===person3.sayName); person4.a.push(3); console.log(person3.a); console.log(person4.a); //對於建構函式裡面注意的第一點：函式名字的話首字母大寫，這是預設的 //第二點的話：建立例項的話裡面帶有new //還需要注意的就是其中每一個例項之間都是互相獨立的.各自是自己的 //對於其中的建構函式的缺點就是：每一個例項都要將其中的方法重新建立一遍（對於其中的屬性來說還不算啥，但是對於其中的方法來說真的沒有那個必要）,對語氣中的方法來說，將其中的方法寫在全局裡面，但是這裡有很多的不好的地方，這裡在全域性作用域下面的建立的函式，其中的呼叫的話還是需要其中的物件來呼叫，而且每每建立一個函式的話就相當於在全域性變數裡面建立了很多的物件。還不利用封裝 //原型模式 //對於其中的原型模式最主要體現的就是共享 function WangHan(){} WangHan.prototype.name="王涵"; WangHan.prototype.sex ="男"; WangHan.prototype.sayName=function(){ console.log("王涵你是小豬豬嗎！"); } WangHan.prototype.a=[1,2]; var xiaohanhan = new WangHan(); xiaohanhan.name="王涵喜歡小豬豬"; var dahanhan = new WangHan(); console.log("xiaohanhan:"+xiaohanhan.name+"dahanhan:"+dahanhan.name); console.log(xiaohanhan.sayName===dahanhan.sayName); console.log(xiaohanhan.a,dahanhan.a); xiaohanhan.a.push(1); console.log(xiaohanhan.a,dahanhan.a); console.log(WangHan.prototype.a); //對於其中的原型裡面的對於其中的基本型別來說在例項上進行修改其中的值之後不會將其中的原型的改變，但是對語氣其中的引用型別來說改變其中一個例項裡面的值對應的會將其中的原型中的進行改變 //其中的檢視的值來說現在例項上進行查詢，找不到的時候再去原型上進行查詢 //原型的注意點：其中凡是從父親那裡繼承的話，利用其中的hasOwnProtype的話，返回的將是false，那都不是自己的呦。除非你自己在例項上重新定義。對於其中的in操作符來說會將其中的例項和原型上的可以列舉的屬性都會進行輸出的。 console.log(dahanhan.hasOwnProperty("name")); console.log("name" in dahanhan); //其中還有比較簡單的原型的語法利用其中的字面量的形式，利用其中的物件字面量的形式的，只不過這裡需要注意的就是，其中的constructor不在指向其中的構造函數了，而是指向原型了。物件字面量裡面其中利用一個大括號將其中的括起來了。所以說這裡的constructor的話就是指向其中的object的。因為是物件字面量所以說我們這裡在宣告的時候就需要自己手動添加里面的constructor了， function Liy(){ } //如果說其中的constructor真的很重要的話，我們可以像下面這樣將其中的constructor給手動加上 Liy.prototype={ constructor:Liy, name:"liy", age:20 } let abc = new Liy(); console.log(abc.name); //接下來是就是將其中的建構函式模組和原型進行組合使用，這裡將其中的新增其中的屬性（基本型別和引用型別）的話就利用的是其中的構造該函式的形式，對於其中方法的話利用的是原型，只不過我們在這裡需要指出來的就是constructor //對於其中的動態原型（假如給裡面新增一個方法嗎，其中原型中存在的話，不在新增，反之），寄生建構函式（和工廠模式可以說一模一樣，只是將其中的函式名字的首字母進行大寫。應用就是給物件建立建構函式），穩妥建構函式（不用this，不用new，對應裡面的屬性只能用新增的方法來訪問）來說 </script> </body> </html>