对象构造与原型-优快云博客

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/109569169

1. 对象类型(蓝图)(类)

1.1. 通过文本和new Object()的方式, 我们只能创建单一对象。

1.2. 有时我们需要创建相同"类型"的许多对象的"蓝图"。

1.3. 创建一种"对象类型"的方法, 是使用对象构造器函数。

1.4. 下面的Person()函数就是对象构造器函数:

function Person(first, last) {
    this.firstName = first;
    this.lastName = last;
}

1.5. 通过new关键词调用构造器函数可以创建相同类型的对象:

var myFather = new Person("Bill", "Gates");
var myMother = new Person("Steve", "Jobs");

1.6. 用大写首字母对构造器函数命名是个好习惯。

2. 为构造器添加属性和方法

2.1. 为对象添加属性和方法

function Person(first, last) {
    this.firstName = first;
    this.lastName = last;
}

var myFather = new Person("Bill", "Gates");
var myMother = new Person("Steve", "Jobs");

// 给myFather对象添加属性
myFather.nationality = "English";
// 给myFather对象添加方法
myFather.fullName = function () {
    return this.firstName + " " + this.lastName;
};

// myMother对象没有nationality属性和fullName方法

2.2. 您无法为对象构造器添加属性和方法

function Person(first, last) {
    this.firstName = first;
    this.lastName = last;
}
Person.nationality = "English";
Person.fullName = function () {
    return this.firstName + " " + this.lastName;
};

var myFather = new Person("Bill", "Gates");
var myMother = new Person("Steve", "Jobs");

// myFather 和myMother都没有nationality属性和fullName方法

2.3. 如需向构造器添加一个属性和方法, 您必须添加到构造器函数。

function Person(first, last, nationality) {
    this.firstName = first;
    this.lastName = last;
    this.nationality = nationality;
    this.fullName = function () {
    	return this.firstName + " " + this.lastName;
	};
}

2.4. 例子

2.4.1. 代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>无法为对象构造器添加属性和方法</title>
	</head>
	<body>
		<script type="text/javascript">
			function Person(firstName, lastName) {
				this.firstName = firstName;
				this.lastName = lastName;
			}

			Person.nationality = "English";
			Person.fullName = function () {
				// 这里的this指的是Person本身
			    return this.firstName + " " + this.lastName;
			};

			var myFather = new Person("Bill", "Gates");
			var myMother = new Person("Steve", "Jobs");

			// myFather对象没有nationality属性, myFather.nationality返回undefined
			document.write('myFather.nationality: ' + myFather.nationality + '<br />');
			// myFather对象没有fullName()方法, myFather.fullName()报错
			// document.write('myFather.fullName(): ' + myFather.fullName() + '<br />');
			
			// myMother对象没有nationality属性, myMother.nationality返回undefined
			document.write('myMother.nationality: ' + myMother.nationality + '<br />');
			// myMother对象没有fullName()方法, myMother.fullName()报错
			// document.write('myMother.fullName(): ' + myMother.fullName() + '<br />');
			
			// 可以使用Person.nationality访问nationality属性, 类似于静态值
			document.write('Person.nationality: ' + Person.nationality + '<br />');
			document.write('Person.fullName(): ' + Person.fullName() + '<hr />');


			// 给myFather对象添加属性
			myFather.nationality = "English";
			// 给myFather对象添加方法
			myFather.fullName = function () {
			    return this.firstName + " " + this.lastName;
			};
			// myFather对象访问nationality属性和fullName()方法
			document.write('myFather.nationality: ' + myFather.nationality + '<br />');
			document.write('myFather.fullName(): ' + myFather.fullName() + '<br />');
			
			// myMother对象没有nationality属性, myMother.nationality返回undefined
			document.write('myMother.nationality: ' + myMother.nationality + '<hr />');
			// myMother对象没有fullName()方法, myMother.fullName()报错
			// document.write('myMother.fullName(): ' + myMother.fullName() + '<br />');
		

			function Human(first, last, nationality) {
			    this.firstName = first;
			    this.lastName = last;
			    this.nationality = nationality;
			    this.fullName = function () {
			    	return this.firstName + " " + this.lastName;
				};
			}
			myFather = new Human("Bill", "Gates");
			myMother = new Human("Steve", "Jobs");
			myFather.nationality = 'Chinese';
			myMother.nationality = 'Chinese';
			document.write('myFather.nationality: ' + myFather.nationality + '<br />');
			document.write('myFather.fullName(): ' + myFather.fullName() + '<br />');
			document.write('myMother.nationality: ' + myMother.nationality + '<br />');
			document.write('myMother.fullName(): ' + myMother.fullName() + '<br />');
		</script>
	</body>
</html>

2.4.2. 效果图

3. 原型继承

3.1. 所有JavaScript对象都从原型继承属性和方法。

3.2. Object类的原型位于原型链的顶端。字符串类(String)、布尔类(Boolean)、数字类(Number)、数组类(Array)、函数类(Function), 都继承Object类的原型。

3.3. 字符串对象继承自String类的原型。布尔对象继承自Boolean类的原型。数字对象继承自Number类的原型。数组对象继承自Array类的原型。对象继承自Object类的原型。函数对象继承自Function类的原型。

3.4. 例子

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>原型继承</title>
	</head>
	<body>
		<script type="text/javascript">
			document.write(Object.prototype + "<br />");
			document.write(String.prototype + "<br />");
			document.write(Boolean.prototype + "<br />");
			document.write(Number.prototype + "<br />");
			document.write(Array.prototype + "<br />");
			document.write(Function.prototype.__proto__ + "<hr />");

			var str = new String('Java编程语言(第三版)');
			document.write(str + "<br />");
			var boo = new Boolean(true);
			document.write(boo + "<br />");
			var num = new Number(1);
			document.write(num + "<br />");
			var arr = new Array();
			document.write(arr + "<br />");
			var obj = new Object();
			document.write(obj + "<br />");
			var myFun = new Function();
			document.write((myFun.__proto__ === Function.prototype) + "<br />");
		</script>
	</body>
</html>

3.5. Object.prototype

3.6. String.prototype

3.7. Boolean.prototype

3.8. Number.prototype

3.9. Array.prototype

3.10. Function.prototype.__proto__

3.11. 字符串对象继承自String类的原型。

3.12. 布尔对象继承自Boolean类的原型。

3.13. 数字对象继承自Number类的原型。

3.14. 数组对象继承自Array类的原型。

3.15. 对象继承自Object类的原型。

4. 使用prototype属性给对象构造器添加属性和方法

function Person(first, last) {
    this.firstName = first;
    this.lastName = last;
}

Person.prototype.nationality = "Chinese";

Person.prototype.fullName = function() {
    return this.firstName + " " + this.lastName;
};

5. 例子

5.1. 代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>对象构造器和原型</title>
	</head>
	<body>
		<script type="text/javascript">
			function Person(firstName, lastName) {
				this.firstName = firstName;
				this.lastName = lastName;
			}

			var p1 = new Person('zhang', 'san');
			for(item in p1){
				if ((typeof p1[item]) == 'function') {
					document.write(p1[item]() + '<br />');
				} else {
					document.write(p1[item] + '<br />');
				}
			}

			document.write('<hr />');

			// 通过原型属性给对象构造器添加属性
			Person.prototype.nationality = "Chinese";

			// 通过原型属性给对象构造器添加方法
			Person.prototype.fullName = function() {
			    return this.firstName + " " + this.lastName;
			};

			var p2 = new Person('li', 'si');
			for(item in p2){
				if ((typeof p2[item]) == 'function') {
					document.write(p2[item]() + '<br />');
				} else {
					document.write(p2[item] + '<br />');
				}
			}
		</script>
	</body>
</html>

5.2. 效果图