1 面向对象的定义
面向对象语言都有类的概念,通过类可以创建任意多个具有相同属性或者方法的对象。对象是无序属性的集合,其属性可以包括基本值,对象或者函数。
2 理解对象
2.1 属性类型:
2.1.1 数据属性:
[[configurable]] 表示能否delete删除属性进而重新定义属性,能否修改属性的特性,能否把属性修改为访问器属性。
[[enumerable]] 表示能否通过for-in循环返回属性。
[[writable]] 表示能否修改属性值。
[[value]] 包含这个属性的数据值。
2.1.2 访问器属性:
[[configurable]] 表示能否delete删除属性进而重新定义属性,能否修改属性的特性,能否把属性修改为访问器属性。
[[enumerable]] 表示能否通过for-in循环返回属性。
[[get]] 在读取属性时调用的函数。
[[set] 在写入属性时调用的函数。
2.2 定义属性
var book = {
year:2012,
edition:1
}
Object.defineProperty(book,"year",{
// enumerable:false,
get: function(){
return this._year;
},
set: function(newValue){
this._year = newValue;
this.edition += 1;
}
});
book.year = 2000;
console.log(book.year);//2000
console.log(book.edition);//2
2.3 定义多个属性
var book = {};
Object.defineProperties(book,{
_year:{
writable:true,
value:2004
},
edition:{
writable:true,
value:1
},
year:{
get:function(){
return this._year;
},
set: function(newValue){
this._year=newValue;
this.edition+=1;
}
}
});
book.year = 2019;
console.log(book.year);//2019
console.log(book.edition);//2
2.4 读取属性的特征
var ya = Object.getOwnPropertyDescriptor(book,"_year");
console.log(ya.value);//2019
console.log(ya.writable);//true
console.log(ya.configurable);//false
console.log(ya.enumerable);//false
var ed = Object.getOwnPropertyDescriptor(book,"edition");
console.log(ed.value);//2
3 创建对象
3.1 工厂模式
function createPerson(name, age, job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
console.log(o.name);
}
return o;
}
var p1 = createPerson("dd",20,"developer");
var p2 = createPerson("yy",19,"tester");
优点:解决了多个相似对象的问题,没解决对象识别的问题。
3.2 构造函数模式
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
console.log(this.name);
}
}
var p1 = new Person("dd",20,"developer");
var p1 = new Person("yy",19,"tester");
优缺点:解决了对象识别的问题,但是每个方法都要在实例上重新创建一遍。
3.3 原型模式
function Person(){
}
Person.prototype={
constructor:Person,//如果不写这段,p1.constructor == Person返回false
name:"dd",
age:20,
job:"developer",
friends: ["tom","jerry"],
sayName:function(){
console.log(this.name);
}
}
var p1 = new Person();
p1.sayName();//"dd"
var p2 = new Person();
p2.sayName();//"dd"
console.log(p1.sayName === p2.sayName);//true,说明共享同一个函数
console.log(Object.getPrototypeOf(p1) == Person.prototype);
console.log(p1.hasOwnProperty("name"));//false,判断属性存在于原型中还是实例中,存在于实例中才会返回true
p1.name="zdd";
console.log(p1.hasOwnProperty("name"));//true
console.log("name" in p1);//true
console.log("sex" in p1);//false
p1.sex = "male";
console.log("sex" in p1);//true,对象能够访问到属性就返回true
优点:让所有的对象实例共享它所包含的实例和方法。
3.3.1 原型的动态性
//demo1
var p = new Person();
Person.prototype.sayHi = function(){
console.log("hi");
};
p.sayHi();//"hi"(没有问题。实例和原型之间的松散连接关系,实例和原型之间的连接是一个指针,实例只想原型,而不是构造函数)
//demo2
function Persontmp(){
}
// var friend = new Persontmp();
Persontmp.prototype = {//这里相当于重写原型对象
constructor:Person,
name:"dd",
age:20,
job:"developer",
sayName:function(){
console.log(this.name);
}
}
friend.sayName(); //error
3.3.2 原型对象的问题
p1.friends.push("david");
console.log(p1.friends);//[ 'tom', 'jerry', 'david' ]
console.log(p2.friends);//[ 'tom', 'jerry', 'david' ]
缺点:原型模式所有的属性都共享了
3.4 组合使用构造函数模式和原型模式
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.friend = ["tom", "jerry"];
}
Person.prototype={
constructor: Person,
sayName: function(){
console.log(this.name);
}
}
var p1 = new Person("dd",20,"developer");
var p2 = new Person("yy",19,"tester");
p1.friend.push("vans");
console.log(p1.friend);//[ 'tom', 'jerry', 'vans' ]
console.log(p2.friend);//[ 'tom', 'jerry' ]
console.log(p1.friend===p2.friend);//false
console.log(p1.sayName===p2.sayName);//true
3.5 动态原型模式
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
if(typeof this.sayName != "function"){
Person.prototype.sayName = function(){
console.log(this.name);
}
}
}
var friend = new Person("dd",20,"developer");
friend.sayName();//"dd"
friend.sayName = function(){
console.log("hi");
}
friend.sayName();//hi
不能使用对象字面量重写原型,否则会切断现有实例与新原型之间的联系。
3.6 寄生构造函数模式
function Person(name,age,job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
console.log(name);
};
return o;
}
var friend = new Person("dd",20,"developer");
friend.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","yellow","blue");
console.log(colors.toPipedString())
不能依赖instanceof 操作符确定对象类型,所以如果可以使用其他模式的时候,不要使用这种模式。
3.7 稳妥构造函数模式
使用稳妥构造函数模式的前提:
新创建对象的实例方法不引用this,不实用new操作符调用构造函数。
function Person(name,age,job){
var o = new Object();
//定义私有变量和函数
//添加方法
o.sayName = function(){
console.log(name);
};
return o;
}
var friend = new Person("dd",20,"developer");
friend.sayName();//dd
console.log(friend.name);//undefined
// 除了使用sayName方法,无法访问其他数据成员,使它非常适合在某些安全执行环境
创建的对象与构造函数之间没有什么关系,因此instanceof 操作符对这种对象没有什么意义。
(读书总结,摘自JavaScript高级程序设计,第6章)