javascript 面向对象的程序设计--对象

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章)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值