6 javascript面向对象-理解对象

6.1理解对象

ECMA-262 把对象定义为:“无序属性的集合,其属性可以包含基本值、对象或者函数。”严格来 讲,这就相当于说对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字,而每个名字都映射到一个值。正因为这样(以及其他将要讨论的原因),我们可以把 ECMAScript 的对象想象成散列表:无非就是一组名值对,其中值可以是数据或函数。

var person = {   
	name: "Nicholas",
	age: 29,
	job: "Software Engineer",
	sayName: function(){
	alert(this.name);
	}
};

6.1.1属性类型

ECMA-262 第 5 版在定义只有内部才用的特性(attribute)时,描述了属性(property)的各种特征。

6.1.1.1 数据属性

要修改属性默认的特性,必须使用 ECMAScript 5 的 Object.defineProperty()方法。

var person = {
   name: "Nicholas"
};
Object.defineProperty(person, "name", {
   configurable: false,
   enumerable:ture,
   writable: false,
   value: "Nicholas"
});
alert(person.name); //"Nicholas"
person.name = "Greg";
alert(person.name); //"Nicholas
  • configurable 能否通过 delete 删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性。像前面例子中那样直接在对象上定义的属性,它们的这个特性默认值为 true。
  • enumerable 表示能否通过 for-in 循环返回属性。像前面例子中那样直接在对象上定义的属性,它们的这个特性默认值为 true。
  • writable 表示能否修改属性的值。像前面例子中那样直接在对象上定义的属性,它们的这个特性默认值为 true。
  • value 包含这个属性的数据值
6.1.1.2. 访问器属性

访问器属性不包含数据值;它们包含一对儿 getter 和 setter 函数(不过,这两个函数都不是必需的)。在读取访问器属性时,会调用 getter 函数,这个函数负责返回有效的值;在写入访问器属性时,会调用setter 函数并传入新值,这个函数负责决定如何处理数据。访问器属性不能直接定义,必须使用 Object.defineProperty()来定义。

var book = {
_year: 2004,
edition: 1
};
Object.defineProperty(book, "year", {
	get: function(){
	return this._year;
	},
	set: function(newValue){
		if (newValue > 2004) {
			this._year = newValue;
			this.edition += newValue - 2004;
		}
	}
});
book.year = 2005;
alert(book.edition); //2
  • configurable
  • enumerable
  • get 在读取属性时调用的函数。默认值为 undefined。
  • set 在写入属性时调用的函数。默认值为 undefined。

_year 前面的下划线是一种常用的记号,用于表示只能通过对象方法访问的属性
只指定 getter 意味着属性是不能写,尝试写入属性会被忽略
支持 ECMAScript 5 的这个方法的浏览器有 IE9+(IE8 只是部分实现)、 Firefox 4+、 Safari 5+、 Opera
12+ 和 Chrome 。 在 这 个 方 法 之 前 , 要 创 建 访 问 器 属 性 , 一 般 都 使 用 两 个 非 标 准 的 方 法 : defineGetter()和_defineSetter
()。

6.1.2定义多个属性

ECMAScript 5 又定义了一个 Object.defineProperties()方法。

var book = {};
Object.defineProperties(book, {
   _year: {
   	value: 2004
   },
   edition: {
   	value: 1
   },
   year: {
   	get: function(){
   		return this._year;
   	},
   	set: function(newValue){
   		if (newValue > 2004) {
   			this._year = newValue;
   			this.edition += newValue - 2004;
   		}
   	}
   }
});

6.1.3 读取属性的特性

ECMAScript 5 的 Object.getOwnPropertyDescriptor()方法,可以取得给定属性的描述
符返回值是一个对象,如果是访问器属性,这个对象的属性有 configurable、enumerable、 get 和 set;如果是数据属性,这个对象的属性有configurable、 enumerable、 writable 和 value。

var descriptor = Object.getOwnPropertyDescriptor(book, "_year");
alert(descriptor.value); //2004
alert(descriptor.configurable); //false

6.2创建对象

6.2.1工厂模式

考虑到在 ECMAScript 中无法创建类,开发人员
就发明了一种函数,用函数来封装以特定接口创建对象的细节,

function createPerson(name, age, job){
   var o = new Object();
   o.name = name;
   o.age = age;
   o.job = job;
   o.sayName = function(){
   	alert(this.name);
   };
   return o;
}
var person1 = createPerson("Nicholas", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");

6.2.2构造函数模式

function Person(name, age, job){
   this.name = name;
   this.age = age;
   this.job = job;
   this.sayName = function(){
   	alert(this.name);
   };
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
alert(person1.constructor == Person); //true
alert(person2.constructor == Person); //true

创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型;而这正是构造函数模式胜过工厂模式的地方。

  • 以这种方式定义的构造函数是定义在 Global 对象(在浏览器中是 window 对象)中的。

要创建 Person 的新实例,必须使用 new 操作符。以这种方式调用构造函数实际上会经历以下 4个步骤:
(1) 创建一个新对象;
(2) 将构造函数的作用域赋给新对象(因此 this 就指向了这个新对象);
(3) 执行构造函数中的代码(为这个新对象添加属性);
(4) 返回新对象。

6.2.2.1. 将构造函数当作函数
// 当作构造函数使用
var person = new Person("Nicholas", 29, "Software Engineer");
person.sayName(); //"Nicholas"
// 作为普通函数调用
Person("Greg", 27, "Doctor"); // 添加到 window
window.sayName(); //"Greg"
// 在另一个对象的作用域中调用
var o = new Object();
Person.call(o, "Kristen", 25, "Nurse");
o.sayName(); //"Kristen"
6.2.2.2. 构造函数的问题
function Person(name, age, job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = sayName;
}
function sayName(){
  alert(this.name);
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

sayName()函数的定义转移到了构造函数外部。而在构造函数内部,我们
将 sayName 属性设置成等于全局的 sayName 函数
person1 和 person2 对象就共享了在全局作用域中定义的同一个 sayName()函数
在全局作用域中定义的函数实际上只能被某个对象调用

6.2.3原型模式

我们创建的每个函数都有一个 prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。

function Person(){}
Person.prototype.name = "Nicholas";
Person.prototype.sayName = function(){
  alert(this.name);
};
var person1 = new Person();
person1.sayName(); //"Nicholas"
var person2 = new Person();
person2.sayName(); //"Nicholas"
alert(person1.sayName == person2.sayName); //true
6.2.3.1. 理解原型对象

在这里插入图片描述

  • 虽然在所有实现中都无法访问到[[Prototype]],但可以通过 isPrototypeOf() 方法来确定对象之间是否存在这种关系。从本质上讲,如果[[Prototype]]指向调用isPrototypeOf()方法的对象(Person.prototype),那么这个方法就返回 true,如下所示:
alert(Person.prototype.isPrototypeOf(person1)); //true
alert(Person.prototype.isPrototypeOf(person2)); //true
  • ECMAScript 5 增加了一个新方法,Object.getPrototypeOf(),在所有支持的实现中,这个方法返回[[Prototype]]的值。例如:
alert(Object.getPrototypeOf(person1) == Person.prototype); //true
alert(Object.getPrototypeOf(person1).name); //"Nicholas

每当代码读取某个对象的某个属性时,都会执行一次搜索,目标是具有给定名字的属性。搜索首先从对象实例本身开始。如果在实例中找到了具有给定名字的属性,则返回该属性的值;如果没有找到,则继续搜索指针指向的原型对象,在原型对象中查找具有给定名字的属性。
当为对象实例添加一个属性时,这个属性就会屏蔽原型对象中保存的同名属性

delete person1.name;
alert(person1.name); //"Nicholas"—— 来自原型
  • 使用 hasOwnProperty() 方法可以检测一个属性是存在于实例中,还是存在于原型中。这个方法(不要忘了它是从 Object 继承来的)只在给定属性存在于对象实例中时,才会返回 true。来看下面这个例子。
function Person(){}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
	alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
alert(person1.hasOwnProperty("name")); //false
person1.name = "Greg";
alert(person1.name); //"Greg"—— 来自实例
alert(person1.hasOwnProperty("name")); //true
alert(person2.name); //"Nicholas"—— 来自原型
alert(person2.hasOwnProperty("name")); //false
delete person1.name;
alert(person1.name); //"Nicholas"—— 来自原型
alert(person1.hasOwnProperty("name")); //false
6.2.3.2. 原型与 in 操作符

in 操作符只要通过对象能够访问到属性就返回 true, hasOwnProperty()只在属性存在于
实例中时才返回 true,因此只要 in 操作符返回 true 而 hasOwnProperty()返回 false,就可以确定属性是原型中的属性。

alert("name" in person1); //true

要取得对象上所有可枚举的实例属性,可以使用 ECMAScript 5 的 Object.keys() 方法。这个方法接收一个对象作为参数,返回一个包含所有可枚举属性的字符串数组。

var keys = Object.keys(Person.prototype);
alert(keys); //"name,age,job,sayName"
6.2.3.3. 更简单的原型语法

不写constructor : Person最终结果相同,但有一个例外: constructor 属性不再指向 Person 了。如果 constructor 的值真的很重要,可以像下面这样特意将它设置回适当的值。

function Person(){}
Person.prototype = {
   constructor : Person,
   name : "Nicholas",
   age : 29,
   job: "Software Engineer",
   sayName : function () {
   	alert(this.name);
   }
};
6.2.3.4. 原型的动态性

尽管可以随时为原型添加属性和方法,并且修改能够立即在所有对象实例中反映出来,但如果是重
写整个原型对象,那么情况就不一样了。我们知道,调用构造函数时会为实例添加一个指向最初原型的[[Prototype]]指针,而把原型修改为另外一个对象就等于切断了构造函数与最初原型之间的联系。请记住:实例中的指针仅指向原型,而不指向构造函数。看下面的
在这里插入图片描述

6.2.3.5. 原生对象的原型

原型模式的重要性不仅体现在创建自定义类型方面,就连所有原生的引用类型,都是采用这种模式创建的。所有原生引用类型(Object、 Array、 String,等等)都在其构造函数的原型上定义了方法。

6.2.3.6. 原型对象的问题

原型模式也不是没有缺点。首先,它省略了为构造函数传递初始化参数这一环节,结果所有实例在默认情况下都将取得相同的属性值。虽然这会在某种程度上带来一些不方便,但还不是原型的最大问题。原型模式的最大问题是由其共享的本性所导致的。

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

构造函数模式用于定义实例属性,而原型模式用于定义方法和共享的属性。结果,每个实例都会有自己的一份实例属性的副本,但同时又共享着对方法的引用,最大限度地节省了内存。

6.2.5动态原型模式

它把所有信息都封装在了构造函数中,而通过在构造函数中初始化原型(仅在必要的情况下),又保持了同时使用构造函数和原型的优点。换句话说,可以通过检查某个应该存在的方法是否有效,来决定是否需要初始化原型。

function Person(name, age, job){
	//属性
	this.name = name;
	this.age = age;
	this.job = job;
	//方法
	if (typeof this.sayName != "function"){
		Person.prototype.sayName = function(){
			alert(this.name);
		};
	}
}
var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName();

6.2.6寄生构造函数模式

通常,在前述的几种模式都不适用的情况下,可以使用寄生(parasitic)构造函数模式。这种模式的基本思想是创建一个函数,该函数的作用仅仅是封装创建对象的代码,然后再返回新创建的对象;但从表面上看,这个函数又很像是典型的构造函数。

function Person(name, age, job){
	var o = new Object();
	o.name = name;
	o.age = age;
	o.job = job;
	o.sayName = function(){
		alert(this.name);
	};
	return o;
}
var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName(); //"Nicholas"

6.2.7稳妥构造函数模式

所谓稳妥对象,指的是没有公共属性,而且其方法也不引用 this 的对象。稳妥对象最适合在一些安全的环境中(这些环境中会禁止使用 this 和 new),或者在防止数据被其他应用程序(如 Mashup程序)改动时使用。

function Person(name, age, job){
	//创建要返回的对象
	var o = new Object();
	//可以在这里定义私有变量和函数
	//添加方法
	o.sayName = function(){
		alert(name);
	};
	//返回对象
	return o;
}

猜你喜欢

转载自blog.csdn.net/weixin_41754415/article/details/82793651