資訊專欄INFORMATION COLUMN
摘要：二用操作符構(gòu)造對(duì)象屬性名屬性值屬性名屬性值屬性名屬性值屬性名屬性值方法名方法名首先用創(chuàng)建一個(gè)空對(duì)象，然后用多條語(yǔ)句給對(duì)象添加屬性方法。他的寫法與三用函數(shù)聲明的方式構(gòu)造對(duì)象比較像，但是稍有不同。
-- 新手向知識(shí)，就不用ES6寫法了。
一、字面量聲明var obj = {
屬性名1 : 屬性值,
屬性名2 : 屬性值,
屬性名3 : 屬性值,
方法名1 : function() {
.....
},
方法名2 : function() {
.....
}
}
通過(guò)obj.屬性名或obj.方法名()就可以讀取或調(diào)用對(duì)象的屬性/方法了。
二、用new操作符構(gòu)造Object對(duì)象var obj = new Object();
obj.屬性名1 = 屬性值1;
obj.屬性名2 = 屬性值2;
obj.屬性名3 = 屬性值3;
obj.屬性名4 = 屬性值4;
obj.方法名1 = function() {
....
};
obj.方法名2 = function() {
....
};
....
首先用new Object()創(chuàng)建一個(gè)空對(duì)象，然后用多條語(yǔ)句給對(duì)象添加屬性/方法。
三、用函數(shù)聲明的方式構(gòu)造對(duì)象函數(shù)Function本身就是對(duì)象Object的實(shí)例
var fn = new Function(); //new一個(gè)空函數(shù)
function myFn() {}; //聲明一個(gè)空函數(shù)
console.log(fn instanceof Object); //true
console.log(myFn instanceof Object); //true
所以可以模仿new Objcet()構(gòu)造對(duì)象的方式，用function myFn() {}聲明一個(gè)自定義的函數(shù)，然后通過(guò)new myFn()構(gòu)造對(duì)象，比如：
function person(name, age) {
this.name = name;
this.age = age;
this.say = function() {
console.log("My name is "+ this.name + ", I"m " + this.age + " years old");
}
}
var xiaoMing = new person("xiaoming", 16);
xiaoMing.say(); //"My name is xiaoming, I"m 16 years old"
通過(guò)這種方式聲明的對(duì)象，每一次new出來(lái)的對(duì)象都是獨(dú)立的，互相不會(huì)有影響，屬性、方法中的this指向的就是新創(chuàng)建的、調(diào)用他們的對(duì)象。
四、工廠模式聲明對(duì)象工廠模式聲明對(duì)象可以理解成二、三兩種方法的結(jié)合體，用三的思想套進(jìn)二的內(nèi)容。仿照上面例子舉例：
function person(name, age) {
var obj = new Object();
obj.name = name;
obj.age = age;
obj.say = function() {
console.log("My name is "+ obj.name + ", I"m " + obj.age + " years old");
};
return obj;
}
var xiaoMing = person("xiaoming", 16);
xiaoMing.say(); //"My name is xiaoming, I"m 16 years old"
var xiaoHong = person("xiaohong", 18);
xiaoHong.say(); //"My name is xiaohong, I"m 18 years old"
工廠模式之所以叫工廠模式，就是類似于現(xiàn)實(shí)生活中的工廠可以產(chǎn)生大量相似的商品，去做同樣的事情，實(shí)現(xiàn)同樣的效果。他的寫法與三、用函數(shù)聲明的方式構(gòu)造對(duì)象比較像，但是稍有不同。
每一次調(diào)用function 聲明的函數(shù)時(shí)，它在內(nèi)部new Object()，最后將這個(gè)新建的對(duì)象return回來(lái)，調(diào)用時(shí)就像普通函數(shù)調(diào)用一樣，實(shí)例化的時(shí)候不用再new了（內(nèi)部new過(guò)）。雖然多次調(diào)用該函數(shù)走的都是一樣的流程，但是生產(chǎn)出來(lái)的兩個(gè)產(chǎn)品互不影響。
五、原型方式聲明對(duì)象function person() {/*空*/};
person.prototype.height = "1.80m";
person.prototype.grade = "Senior 3";
person.prototype.say = function() {
console.log( "I"m " + this.height + " tall and I"m in "+ this.grade);
}
var xiaoMing = new person();
xiaoMing.say(); //"I"m 1.80m tall and I"m in Senior 3"
原型方式是將該對(duì)象的屬性/方法寫在他的prototype屬性所指的對(duì)象上。（每一個(gè)函數(shù)或者說(shuō)對(duì)象都有一個(gè)prototype屬性，這個(gè)屬性以對(duì)象的形式存在）。
每次new實(shí)際上有這么一些操作：
1)創(chuàng)建一個(gè)空對(duì)象
2)把這個(gè)空對(duì)象的__proto__指向構(gòu)造函數(shù)的prototype
3)把這個(gè)空對(duì)象賦值給this
4)執(zhí)行構(gòu)造函數(shù)內(nèi)的代碼
new出來(lái)的新對(duì)象的__proto__屬性都會(huì)指向person.prototype，然后就可以執(zhí)行person.prototype上的函數(shù)內(nèi)容了。
這有點(diǎn)像JS上常說(shuō)的事件代理/委托。事件不直接綁定在該DOM元素上，而是綁定在它的父級(jí)元素，當(dāng)給該DOM元素添加兄弟元素時(shí)，兄弟元素因?yàn)槊芭?，能觸發(fā)相同的事件。
六、混合模式混合模式可以理解成原型模式+構(gòu)造函數(shù)，舉例：
function person(name, height) {
this.name = name;
this.height = height;
};
person.prototype.age = 18;
person.prototype.grade = "Senior 3";
person.prototype.say = function() {
console.log("Hello, my name is " + this.name + ". I"m " + this.age + " years old, " + this.height + " tall and I"m in "+ this.grade + ".");
}
var xiaoMing = new person("Xiaoming", "1.80m");
xiaoMing.say();
//"Hello, my name is Xiaoming. I"m 18 years old, 1.80m tall and I"m in Senior 3."
var xiaoHong = new person("Xiaohong", "1.65m")
xiaoHong.say();
//"Hello, my name is Xiaohong. I"m 18 years old, 1.65m tall and I"m in Senior 3."
對(duì)比混合模式和原型模式可以發(fā)現(xiàn)，混合模式函數(shù)體不是空的，而函數(shù)體內(nèi)的內(nèi)容就是前邊說(shuō)的構(gòu)造方式。
這種方式在實(shí)際開發(fā)中更加常用。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/97771.html
摘要：如果網(wǎng)頁(yè)中包含多個(gè)框架，那實(shí)際上就存在兩個(gè)以上不同的全局執(zhí)行環(huán)境，從而存在兩個(gè)以上不同版本的構(gòu)造函數(shù)。如果你從一個(gè)框架向另一個(gè)框架傳入一個(gè)數(shù)組，那么傳入的數(shù)組與在第二個(gè)框架中原生創(chuàng)建的數(shù)組分別具有各自不同的構(gòu)造函數(shù)。 1. 首先，typeof肯定是不行的 對(duì)于一些基本類型，typeof是可以判斷出數(shù)據(jù)類型，但是判斷一些引用類型時(shí)候，不能具體到具體哪一種類型 再來(lái)復(fù)習(xí)一下typeof的...
摘要：一數(shù)據(jù)類型基本類型引用類型類型判斷返回結(jié)果未定義布爾值字符串?dāng)?shù)值對(duì)象或者函數(shù)拓展堆棧兩種數(shù)據(jù)結(jié)構(gòu)堆隊(duì)列優(yōu)先，先進(jìn)先出由操作系統(tǒng)自動(dòng)分配釋放，存放函數(shù)的參數(shù)值，局部變量的值等。 一、數(shù)據(jù)類型 基本類型：`Null Boolean String Undefined Number(NB SUN)` 引用類型：`Array Function Object` 類型判斷：typeof 返回結(jié)果...
摘要：把數(shù)組的所有元素放入一個(gè)字符串。刪除并返回?cái)?shù)組的第一個(gè)元素從某個(gè)已有的數(shù)組返回選定的元素對(duì)數(shù)組的元素進(jìn)行排序刪除元素，并向數(shù)組添加新元素。返回該對(duì)象的源代碼。把數(shù)組轉(zhuǎn)換為本地?cái)?shù)組，并返回結(jié)果。 首先由一個(gè)朋友提的問(wèn)題開始 var a = [].push(233) console.log(a) 結(jié)果是 1；一開始我也搞錯(cuò)了，以為返回的是新數(shù)組，然后去查了下資料，才沒(méi)發(fā)現(xiàn)返回的是新數(shù)組的長(zhǎng)...
摘要：首次發(fā)表在個(gè)人博客需要組件之進(jìn)行通信的幾種情況父組件向子組件通信子組件向父組件通信跨級(jí)組件通信沒(méi)有嵌套關(guān)系組件之間的通信父組件向子組件通信數(shù)據(jù)流動(dòng)是單向的父組件向子組件通信也是最常見的父組件通過(guò)向子組件傳遞需要的信息子組件向父組件通信利用 showImg(https://segmentfault.com/img/remote/1460000012361466?w=1240&h=667)...
摘要：在使用的過(guò)程中，不可避免的需要組件間進(jìn)行消息傳遞通信，組件間通信大體有下面幾種情況父組件向子組件通信子組件向父組件通信非嵌套組件間通信跨級(jí)組件之間通信父組件向子組件通信父組件通過(guò)向子組件傳遞，子組件得到后進(jìn)行相應(yīng)的處理。 在使用 React 的過(guò)程中，不可避免的需要組件間進(jìn)行消息傳遞（通信），組件間通信大體有下面幾種情況： 父組件向子組件通信 子組件向父組件通信 非嵌套組件間通信 跨...
閱讀 3258·2021-11-25 09:43
閱讀 2457·2021-09-07 10:28
閱讀 4007·2021-08-11 11:14
閱讀 2869·2019-08-30 13:49
閱讀 3644·2019-08-29 18:41
閱讀 1273·2019-08-29 11:26
閱讀 2077·2019-08-26 13:23
閱讀 3482·2019-08-26 10:43
