前端开发JS——对象与原型

27、创建对象

①工厂模式批量创建对象  缺点：无法对象识别，即所有对象都是Object类型;方法内存空间浪费/封装不太完善

function sayName(){    //可以有效节省内存空间

　　console.log(this.name);

}

function createObject(name, age, gender){

var obj = {

name:name,

age:age,

gender:gender,

sayName: sayName,    //将方法写在外面，可以有效节省内存空间

};

return obj;    //或者直接返回对象

}

 

var o1 = createObject('zhangsan', 12, 'man');

var o2 = createObject('lisi', 15, 'woman');

var dog = createObject('erha', 4, 'man');

console.log(o1, o2, dog);

//通过实例找构造函数

console.log(o1.constructor);     //Object

 

②构造函数模式创建对象 

自定义构造函数     问题：方法内存空间浪费/封装不太完善

          

function sayName(){    //可以有效节省内存空间

　　console.log(this.name);

}

function Person(name, age, gender){

//this指向new关键字创建的实例

this.name = name;

this.age = age;

this.gender = gender;

sayName: sayName,    //将方法写在外面，可以有效节省内存空间

}

var p1 = new Person("terry",11,"man");

console.log(p1)

console.log(p1.constructor);    //[Function: Person]

 

function Dog(name, age, color){

//this指向new关键字创建的实例

this.name = name;

this.age = age;

this.color= color;

sayName: sayName,    //将方法写在外面，可以有效节省内存空间

}

var d1 = new Dog("erha",2,"red");

console.log(d1)

console.log(d1.constructor);   //[Function: Dog]

 

③原型模式创建对象 

问题： 实例的数据隔离不安全，因为里面的数据共享

function Person(){}

Person.prototype.name = 'zhangsan';

Person.prototype.friends = [];

Person.prototype.sayName = function(){

　　console.log(this.name);

};

var p1 = new Person();

consoe.log(p1.name);    //zhangsan

var p2 = new Person();

consoe.log(p1.name);    //zhangsan

p1.friends.push('terry');

console.log(p1.friends);  //['terry']

console.log(p2.friends);  //['terry']

console.log(p1.sayName === p2.sayName);   //true

 

④组合使用构造函数模式和原型模式 

//每个实例自有的放到构造函数中，实例共享的放到原型对象中

function Person(name, age, gender){

//this指向new关键字创建的实例

this.name = name;

this.age = age;

this.gender = gender;

this.friends = [];

}

Person.prototype = {    //实例共享的数据

constructor : Person,

sayName:function(){

　　alert(this.name);

       }

}

 

var p1 = new Person("terry",11,"man");

console.log(p1);

console.log(p1.constructor);   //{Function: Person]

var p2 = new Person("larry",11,"woman");

p1.friends.push('hello');

console.log(p1.friends);   //['hello']

console.log(p2.friends);   //[]

 

console.log(Person('aaaa'))   //undefined, 因为this指针需要指向new关键字，这里只有Person，没有new，所以它没有返回对象，返回的是undefined

 

28、对象深入了解

          ①可枚举性：

                    在打印一个对象，所能看到的属性，这些属性的可枚举性都是true；

                    for-in循环返回的属性，这些属性的可枚举性也都是true。

 

          ②对象的属性类型：

[[Configurable]]： 表示是否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问 器属性直接定义在对象中，默认为true)

 

[[Enumerable]]： 表示能否通过for-in循环返回属性。(直接定义在对象中，默认为true)

 

[[Wriable]]： 表示能否修改属性的值。(直接定义在对象中，默认为true)

 

[[Value]]： 包含这个属性的数据值 name:jacky

 

          ③对象的属性特性：

var obj = {

　　name:'zhangsan',

　　age:12,

};

console.log(obj); //{name:'zhangsan', age: 12,}

 

读取属性的特性 Object.getOwnPropertyDescriptor();获取指定属性的描述符该方法接受两个参数， 第一个为属性所在的对象,第二个为要读取其描述符的属性名称

 

//获取属性的描述信息

console.log(Object.getOwnPropertyDescriptor(obj, 'name'));   //{vale: 'zhangsan', writerable:true, enumerable:true, configurable: true}

 

要修改属性默认的特性，必须使用ECMAScript5的Object.defineProperty()方法 defineProperty(属性所在的对象,属性的名字,一个描述符对象);

 

//修改属性的描述信息

Object.defineProperty(obj, 'name', {

//设置属性不可枚举

enumerable: false，   ------->console.log(obj);   //{age:12}

//设置属性不可修改

writable:false,             -------->obj.name = 'lisi'; console.log(obj.name); //zhangsan

//设置属性值

value:'terry',              --------->console.log(obj.name);     //terry

//设置属性是否可以删除delete，是否可以重新定义，是否可以配置

configurable:false,         --------->别人就不能改变这个属性

})

 

④访问器属性      没有值，有get方法和set方法, configurable的属性默认为false

var obj = {

　　name:'zhangsan',

　　age:12,

　　_weight:100,

};

Object.defineProperty(obj, 'weight', {

　　get:function(){

　　　　return this._weight-5;

　　},

　　set:function(param){

　　　　this._weight = param

　　},

　　//enumerable:true,

});

/*Object.defineProperty(obj, '_weight', {

　　enumerable:false

});*/

console.log(obj.weight);   //95

obj.weight = 130

console.log(obj.weight);   //125

console.log(obj._weight);   //130

console.log(obj);  //   {name:'zhangsan', age: 12, weight: [Getter|Setter]}

                    console.log(Object.getOwnPropertyDescript(obj, 'weight'));

console.log(Object.getOwnPropertyDescript(obj, '_weight'));