———————————————————————————————————————————— —————————————
建立物件
#準物件模式
"use strict";
// *****************************************************************var person = new Object();
person.name = "Nicholas";
person.age = 29;
person.job = "Software Engineer";
person.sayName = function(){alert(this.name);};登入後複製
字面量形式
"use strict";
// *****************************************************************var person = {
name: "Nicholas",
age: 29,
job: "Software Engineer",
sayName: function(){alert(this.name);}
};登入後複製
# 工廠模式
無法進行物件辨識
#<>
#"use strict";
// 工厂模式
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("name1", 1, "hehe");
console.log(person1);登入後複製
- 優點：
可以解決工廠作用的無法對象識別問題 沒有顯示地創建對象，直接將屬性和方法賦給了this對象，沒有 return語句
# 缺點：在案例中，每個
Person- 物件都包含一個不同的
Function
#實例的本質，以這種方式建立函數，會導致不同的作用域鍊和標識符解析，但創建 - Function
新實例的機制仍是相同的。而如果將方法放到全域作用域中，自訂的參考類型就沒有封裝性可言
透過 - #new
關鍵字來建立自訂的建構子
將建構子的作用域賦給新物件（
this
指向該物件）
#執行建構函式中的程式碼（為新物件新增屬性）
#傳回新物件
#
"use strict";
// 构造函数模式
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = function() {
console.log(this.name);
}
}
var person1 = new Person("name2", 2, "hehe");
console.log(person1);
// 检测对象类型
console.log(person1.constructor == Object); // false
console.log(person1.constructor == Person); // true
console.log(person1 instanceof Object); // true
console.log(person1 instanceof Person); // true
// 当作构造函数使用
var person2 = new Person("name3", 3, "hehe");
person2.sayName();
// 作为普通函数调用
// Person("name4", 4, "hehe");
// 添加到window,严格模式下无法访问
// window.sayName();
// name4
// 在另一个对象的作用域中调用
var o = new Object();
Person.call(o, "name5", 5, "111"); // 在对象o中调用
o.sayName(); // o就拥有了所有属性和sayName()方法
// 创建两个完成同样任务的Function实例是没必要的,有this对象在,不需要在执行代码前就把函数绑定到特定对象上面
console.log(person1.sayName == person2.sayName); // false,但方法是相同的
// 通过把函数定义转移到构造函数外来解决
function Person2(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = sayName2;
}
function sayName2() { // 在这种情况下person1和person2共享同一个全局函数
console.log(this.name);
}
var person1 = new Person2("name6", 6, "hehe");
var person2 = new Person2("name7", 7, "hehe");
console.log(person1.sayName == person2.sayName); // true登入後複製
#原型模式### ########### ##########優點：### ###############可以解決建構函式模式建立多個方法實例的問題### ###### #######可以讓所有物件實例共享原型所包含的屬性和方法，不必在建構函式中定義物件實例的信息，而可以直接將資訊加入原型物件中#######缺點：
#原型中的所有屬性是被很多實例共享的，對於包含引用類型值（陣列等）的屬性來說是（大問題）
#省略了為建構子傳遞初始化參數這一環節，結果所有實例在預設情況下都將取得相同的屬性值，需要各自單獨傳入參數（這應該不是問題吧）
#所以很少有人單獨使用原型模式，請參閱下面的綜合使用
我們建立的每一個函數都有一個prototype（原型）屬性，是一個指向對象的指針。
關於原型的理解：
#任何時候創建一個新的函數，都會根據一組特定的規則為該函數建立一個prototype屬性，這個屬性指向函數的原型物件。
預設情況下，所有原型物件都會獲得一個constructor（建構子）屬性，包含一個指向 prototype屬性的指標
在實例中，Person.prototype.constructor →# Person，透過建構函式可以繼續為原型物件新增其他的屬性和方法
在建立自訂建構函式後，原型物件預設只取得constructor屬性，其他方法從Object繼承而來，原型指標叫[[prototype]]，但在腳本中沒有提供存取方式，在其他實作中這個屬性不可見，但瀏覽器為物件增加了一個_proto_屬性。
原型指標的連接存在於實例與建構子的原型物件之間，而不是存在於實例與建構子之間。
圖解：
關於原型的屬性：
實例：person1，原型：在尋找屬性時先找person1中的屬性有沒有name，如果有則回傳person1.name
Person#中有沒有name#，參考原型鏈與物件的結構
#########in######運算子和######hasOwnProperty()######區別： ######in操作符：无论属性是在实例还是原型中，都返回true，只有在不存在的情况下才会false
hasOwnProperty(): 只有在调用的实例或原型中的属性才会返回true
案例中整个重写原型的问题图解：
<>
"use strict";
// *****************************************************************
// 原型模式
function Person() {};
Person.prototype.id = 0;
Person.prototype.name = "name0";
Person.prototype.sayName = function() {
console.log(this.name);
};
var person1 = new Person();
person1.sayName();
var person2 = new Person();
person2.name = "name2";
person2.sayName();
console.log(person1.sayName == person2.sayName);
Person.prototype.name = "111"; // 对原型中的初始值修改后,所有的子实例都会修改初始值
person1.sayName();
person2.name = "222";
person2.sayName();
delete person2.name; // 删除person2.name
person2.sayName(); // 111,来自原型
// *****************************************************************
// isPrototypeOf():确定原型关系的方法
console.log(Person.prototype.isPrototypeOf(person1)); // true
var person3 = new Object();
console.log(Person.prototype.isPrototypeOf(person3)); // false
// getPrototypeOf():返回原型[[prototype]]属性的方法
// in操作符
console.log(Object.getPrototypeOf(person2)); // 包含Person.prototype的对象
console.log(Object.getPrototypeOf(person2) == Person.prototype); // true
console.log(Object.getPrototypeOf(person2).name); // 111,初始值
// hasOwnProperty():检测一个属性是唉实例中还是在原型中
console.log(Person.hasOwnProperty("name")); // true
console.log(person1.hasOwnProperty("name")); // false 在上面的操作中没有为person1添加name
console.log("name" in person1); // true
person2.name = "333";
console.log(person2.hasOwnProperty("name")); // true
console.log("name" in person2); // true
// p.s.Object.getOwnPropertyDescriptor()方法必须作用于原型对象上
console.log(Object.getOwnPropertyDescriptor(person1, 'name')); // undefined
console.log(Object.getOwnPropertyDescriptor(Person, 'name')); // Object{...}
// *****************************************************************
// 简单写法
// 以对象字面量的形式来创建新的对象原型
// p.s.此时constructor属性不再指向Person,而是指向Object,因为此处重写了整个对象原型
function Per() {};
Per.prototype = {
id: 0,
name: "Per_name",
sayName: function() {
console.log(this.name);
}
}
// 在该写法中要重写constructor属性,如果直接重写constructor属性会导致[[Enumberable]]=true,可枚举,原生的constructor属性不可枚举
// 正确的重写方法
Object.defineProperty(Per.prototype, "constructor", { enumberable: false, value : Per });
var per1 = new Per();
console.log(person1.constructor); // Person()
console.log(per1.constructor); // Per(),如果不加constructor:Per返回Obejct()
// 图解见上部
// 如果直接重写整个原型对象,然后在调用per1.sayName时候会发生错误,因为per1指向的原型中不包含以改名字明明的属性,而且整个重写的对象无法修改
// function Per() {};
// var per1 = new Per();
// Per.prototype = {
// constructor:Per,
// id: 0,
// name: "Per_name",
// sayName: function() {
// console.log(this.name);
// }
// }
// var per2 = new Per();
// per1.sayName();
// error
// per2.sayName();
// Per_name
// *****************************************************************
// 问题
// 对一个实例的数组进行操作时,其他所有实例都会跟随变化
function Per2() {};
Per2.prototype = {
constructor:Per2,
id: 0,
name: "Per_name",
arr : [1,2]
}
var per3 = new Per2();
var per4 = new Per2();
console.log(per3.arr); // [1, 2]
console.log(per4.arr); // [1, 2]
per3.arr.push("aaa");
console.log(per3.arr); // [1, 2, "aaa"]
console.log(per4.arr); // [1, 2, "aaa"]
console.log(per3.arr === per4.arr); // true登入後複製
组合使用构造函数模式和原型模式
"use strict";
// *****************************************************************
// 组合使用构造函数模式和原型模式
function Person(id, name) {
this.id = id;
this.name = name;
this.friends = [1, 2, '3'];
}
Person.prototype = {
constructor: Person,
sayName: function() {
console.log(this.name);
}
}
var person1 = new Person(1,"p1_name");
var person2 = new Person(2,"p2_name");
person1.friends.push("4");
console.log(person1.friends); // 1,2,3,4 不会相互影响
console.log(person2.friends); // 1,2,3
console.log(person1.friends === person2.friends); // false
console.log(person1.sayName === person2.sayName); // true 共用一个代码块登入後複製
动态原型模式
将所有信息都封装在构造函数中，通过在构造函数中初始化原型（必要情况下）由保持了同时使用构造函数和原型的优点
优点：
可以通过检查某个应该存在的方法是否有效，来决定是否需要初始化原型
p.s.
在该模式下不能使用对象字面量重写原型。如果在已经创建了实例的情况下重写原型，会切断现有实例和新原型之间的联系。
<>
"use strict";
// *****************************************************************
// 组合使用构造函数模式和原型模式
function Person(id, name) {
this.id = id;
this.name = name;
this.friends = [1, 2, '3'];
// 只有在sayName()方法不存在的情况下,才会将它添加到原型中
// if这段代码只会在初次调用构造函数时才会执行
// 这里对原型所做的修改,能够立即在所有实例中得到反映
if (typeof this.sayName != "function") {
Person.prototype.sayName = function() {
console.log(this.name);
}
}
}
var person1 = new Person(1,"hugh");
person1.sayName();登入後複製
寄生构造函数模式
在前几种模式不适用的情况下，可以使用寄生（parasitic）构造函数模式
创建一个函数，仅封装创建对象的代码，然后返回新创建的对象
和工厂模式的区别：使用new操作，并把使用的包装函数叫做构造函数
使用场景：假设我们想创建一个具有额外方法的特殊数组，由于不能直接修改Array构造函数，就可以使用这个模式（见代码）
p.s.
返回的对象与构造函数或与构造函数的原型属性之间没有关系，也就是说，构造函数返回的对象与在构造函数外部创建的对象没有不同
不能依赖instanceof操作符来确定对象类型
如果可以使用其他模式的情况下，不要使用这种模式
<>
"use strict";
// *****************************************************************
function Person(id, name) {
var o = new Object();
o.id = id;
o.name = name;
o.sayName = function() {
console.log(this.name);
}
return o; // 返回新创建的对象
}
var person1 = new Person(1, "111");
person1.sayName();
// 模拟使用场景
function SpecialArray() {
var values = new Array(); // 创建数组
values.push.apply(values, arguments); // 添加值
values.toPipedString = function() {
return this.join("|");
};
return values;
}
var colors = new SpecialArray("red","blue","green");
console.log(colors);
console.log(colors.toPipedString());登入後複製
稳妥构造函数模式
所谓稳妥对象，指的是没有公共属性而且其方法也不引用this的对象
使用场景：
安全的环境中（这些环境会禁止使用this和new）
防止数据被其他应用程序（如Mashup程序）改动时使用
与寄生构造函数模式的区别：
新建对象时不引用this
不适用new操作符构造函数
与寄生构造函数模式类似，该模式创建的对象与构造函数之间也没有什么关系，instanceof操作符也无意义
<>
"use strict";
// *****************************************************************
function Person(id, name) {
var o = new Object();
o.id = id;
o.name = name;
// p.s.在该模式下,除了sayName()方法外,没有其他办法访问name的值
o.sayName = function() {
console.log(name);
}
return o;
}
var person1 = Person(1, "111");
person1.sayName();
// console.log(personn1.name); // Error:person1 is not defined登入後複製
以上是JavaScript 關於建立物件的9種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
