JavaScript面向对象的程序设计——对象、创建对象和原生链

最新推荐文章于 2022-08-09 15:00:06 发布

原创最新推荐文章于 2022-08-09 15:00:06 发布 · 175 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#构造函数、原型和实例关系 #创建对象的模式 #原型链的基本概念 #对象

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文围绕JavaScript中的对象展开，介绍了创建对象的几种模式，包括工厂模式、构造函数模式、原型模式以及组合模式。还阐述了构造函数、原型和实例的关系，以及原型链的基本概念，指出ECMAScript靠原型链实现继承，层层递进构成原型链。

1 对象

面向对象(Object-Oriented,OO)的语言的一个标记，都有类的概念，而通过类可以创建任意多个具有相同属性和方法的对象。ECMA-262把对象定义为：“无序属性的集合，其属性可以包含基本值、对象或者函数。”

创建的自定义对象最简单方式：创建一个object实例，再为其添加属性和方法。目前对象字面量成为创建这种对象的首选模式。

var person = {
	name:"",
	age:29,
	job:"Software Engineer",

	sayName: function(){
		alert(this.name);
	}
};

2 创建对象的几大模式

着重整理后，以图形化方式展示：

其中，A 工厂模式：考虑到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");

B 构造函数模式：重写上述例子

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");

C 原型模式的代码：

	function Person(){
	}
/* 首先采用注释以下代码
    Person.prototype.name = "Nicholas";
	Person.prototype.age = 29;
	Person.prototype.job = "Software Engineer";
	Person.prototype.sayName = function (){
		alert(this.name);
	};
    然后为了更简单的原型语法：为减少不必要的输入，也为了从视觉上更好的封装原型的功能
    下述将Person.prototype设置为等于一个以对象字面量形式创建的新对象
*/
    Person.prototype = {
		name:"Nicholas",
		age:29,
		job:"Software Engineer",
		sayName: function(){
			alert(this.name);
		}
	};
	
	var person1 = new Person();
	var person2 = new Person();

	alert(person1.hasOwnProperty("name"));   //false
	alert("name" in person1); //true

	person1.name = "Greg";
	alert(person1.name);         //"Greg"__来自实例
	alert(person1.hasOwnProperty("name"));    //true
	alert("name" in person1); //true

	alert(person2.name);         //"Nicholas"__来自原型
	alert(person2.hasOwnProperty("name"));    //false
	alert("name" in person2); //true

	delete person1.name;
	alert(person1.name);         //"Nicholas"__来自原型
	alert(person1.hasOwnProperty("name"));    //false
	alert("name" in person1); //true

        var friend = new Person();

	alert(friend instanceOf Object);      //true
	alert(friend instanceOf Person);      //true
	alert(friend.constructor == Person);  //false，不再指向Person
	alert(friend.constructor == Object);  //true
    //解决方法
    //重设构造函数，只适用ECMAScript 5兼容的浏览器
	Object.defineProperty(Person.prototype,"constructor",{
		enumerable: false,
		value:Person
	});

原型对象问题：

1 省略了为构造函数传递初始化参数，结果所有实例在默认情况下都取得相同的属性值。

2 最大问题：共享本性。这种共享对于函数非常合适。然而，对于包含引用类型值的属性来说，对于实例都要有属于自己的全部属性，该问题是做不到。如下代码所示：

	function Person(){
	}
	Person.prototype = {
		constructor: Person,
		name : "Nicholas",
		age : 29,
		job : "Software Engineer",
		friends : ["Shelby", "Court"],
		sayName : function () {
			alert(this.name);
		}
	};

	var person1 = new Person();
	var person2 = new Person();
	person1.friends.push("Van");

	alert(person1.friends); //"Shelby,Court,Van"
	alert(person2.friends); //"Shelby,Court,Van"，共享性问题所在
	alert(person1.friends === person2.friends); //true

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

这种构造函数和原型混成模式，是目前在ECMAScript中使用最广泛、认同度最高的一种创建自定义类型的方法。解决构造函数模式的问题和原型模式下的问题。

    //重写前面的例子
	function Person(name, age, job){
		this.name = name;
		this.age = age;
		this.job = job;
		this.friends = ["Shelby", "Court"];
	}

	Person.prototype = {
		constructor: Person,
		sayName: function (){
			alert(this.name);
		}
	};

	var person1 = new Person("Nicholas", 29, "Software Engineer");
	var person2 = new Person("Greg", 27, "Doctor");

	person1.friends.push("Van");
	alert(person1.friends);     //"Shelby,Court,Van"
	alert(person2.friends);     //"Shelby,Court"
	alert(person1.friends  === person2.friends);  //false
	alert(person1.sayName === person2.sayName);   //true

3 构造函数、原型和实例关系