043_对象构造器和原型

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返回undefineddocument.write('myFather.nationality: ' + myFather.nationality + '<br />');// myFather对象没有fullName()方法, myFather.fullName()报错// document.write('myFather.fullName(): ' + myFather.fullName() + '<br />');// myMother对象没有nationality属性, myMother.nationality返回undefineddocument.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返回undefineddocument.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. 效果图

043_对象构造器和原型相关推荐

JavaScript简单重写构造器的原型
1 //简单重写原型对象: 2 3 //一个构造函数Person 4 function Person(){ 5 6 } 7 //重写Person的原型 8 //把Person的原型赋值给一个新的对象 ...
原型对象prototype和原型属性[[Prototype]]
构造器:可以被 new 运算符调用, Boolean,Number,String,Date,RegExp,Error,Function,Array,Object 都是构造器,他们有各自的实现方式. 比 ...
原生JS 对象包装类原形原型链
对象用已学的知识点,描述一下你心目中的对象 var mrDeng = { name : "mrDeng",age : 40,sex : "male",heal ...
[JS]请给Array本地对象增加一个原型方法，它用于删除数组条目中重复的条目(可能有多个)，返回值是一个包含被删除的重复条目的新数组。
请给Array本地对象增加一个原型方法,它用于删除数组条目中重复的条目(可能有多个),返回值是一个包含被删除的重复条目的新数组. 刚开始复习js题还不太习惯 CSDN上看了一个帖子,说是牛客上的标答, ...
有原型的对象和没有原型的对象
在学习Mobx时接触到了有原型对象和没原型的对象概念声明一个对象 1 let o = Object.create({}) // 方法一 2 let o = {} // 方法二3 let o = Ob ...
js 中对象--对象结构（原型链基础解析）
对于本篇对于如何自定义对象.和对象相关的属性操作不了解的话,可以查我对这两篇博客.了解这两篇可以更容易理解本篇文章用构造函数创建了一个对象 obj对象的本身创建了两个属性 x=1 ,y=2 对 ...
对象的克隆——原型模式
本文转载自 :http://blog.csdn.net/lovelion/article/details/7424559 张纪中版<西游记>以出乎意料的造型和雷人的台词遭到广大观众朋友的热 ...
vue js 对象下的原型_如何使用Vue.js和Pusher创建实时原型反馈应用程序
vue js 对象下的原型 by Neo Ighodaro 由新Ighodaro 如何使用Vue.js和Pusher创建实时原型反馈应用程序 (How to create a realtime pro ...
细说JavaScript对象(2)：原型对象
JavaScript 并没有类继承模型,而是使用原型对象 prototype 进行原型式继承. 尽管人们经常将此看做是 JavaScript 的一个缺点,然而事实上,原型式继承比传统的类继承模型要更加 ...

043_对象构造器和原型

043_对象构造器和原型相关推荐

最新文章

热门文章