小白教程
所有教程
关于
Search
172.69.7.158
172.69.7.158
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“JavaScript prototype”的源代码
本页内容
上一节:
JavaScript_对象
下一节:
JavaScript_Number_对象
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:JavaScript prototype}}[[Category:Javascript 教程|58]] = JavaScript prototype(原型对象) = 所有的 JavaScript 对象都会从一个 prototype(原型对象)中继承属性和方法。 在前面的章节中我们学会了如何使用对象的构造器(constructor): <sample title="" desc="" lang="html" hererun="1"> function Person(first, last, age, eyecolor) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eyecolor; } var myFather = new Person("John", "Doe", 50, "blue"); var myMother = new Person("Sally", "Rally", 48, "green"); </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> </head> <body> <h2>JavaScript 对象</h2> <p id="demo"></p> <script> function Person(first, last, age, eye) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eye; } var myFather = new Person("John", "Doe", 50, "blue"); var myMother = new Person("Sally", "Rally", 48, "green"); document.getElementById("demo").innerHTML = "我的父亲年龄是 " + myFather.age + "。我的母亲年龄是 " + myMother.age; </script> </body> </html> </run> 我们也知道在一个已存在构造器的对象中是不能添加新的属性: <sample title="" desc="" lang="html" hererun="1"> Person.nationality = "English"; </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> </head> <body> <h2>JavaScript 对象</h2> <p>你无法给构造函数添加新的属性。</p> <p id="demo"></p> <script> function Person(first, last, age, eye) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eye; } Person.nationality = "English"; var myFather = new Person("John", "Doe", 50, "blue"); var myMother = new Person("Sally", "Rally", 48, "green"); document.getElementById("demo").innerHTML = "我父亲的国籍是 " + myFather.nationality; </script> </body> </html> </run> 要添加一个新的属性需要在在构造器函数中添加: <sample title="" desc="" lang="html" hererun="1"> function Person(first, last, age, eyecolor) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eyecolor; this.nationality = "English"; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> </head> <body> <h2>JavaScript 对象</h2> <p id="demo"></p> <script> function Person(first, last, age, eye) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eye; this.nationality = "English"; } var myFather = new Person("John", "Doe", 50, "blue"); var myMother = new Person("Sally", "Rally", 48, "green"); document.getElementById("demo").innerHTML = "我父亲的国籍是 " + myFather.nationality + "。我母亲的国籍是 " + myMother.nationality; </script> </body> </html> </run> == prototype 继承 == 所有的 JavaScript 对象都会从一个 prototype(原型对象)中继承属性和方法: * <code>Date</code> 对象从 <code>Date.prototype</code> 继承。 * <code>Array</code> 对象从 <code>Array.prototype</code> 继承。 * <code>Person</code> 对象从 <code>Person.prototype</code> 继承。 所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例。 JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到一个名字匹配的属性或到达原型链的末尾。 <code>Date</code> 对象, <code>Array</code> 对象, 以及 <code>Person</code> 对象从 <code>Object.prototype</code> 继承。 === 添加属性和方法 === 有的时候我们想要在所有已经存在的对象添加新的属性或方法。 另外,有时候我们想要在对象的构造函数中添加属性或方法。 使用 prototype 属性就可以给对象的构造函数添加新的属性: <sample title="" desc="" lang="html" hererun="1"> function Person(first, last, age, eyecolor) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eyecolor; } Person.prototype.nationality = "English"; </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> </head> <body> <h2>JavaScript 对象</h2> <p id="demo"></p> <script> function Person(first, last, age, eye) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eye; } Person.prototype.nationality = "English"; var myFather = new Person("John", "Doe", 50, "blue"); document.getElementById("demo").innerHTML = "我父亲的国籍是 " + myFather.nationality; </script> </body> </html> </run> 当然我们也可以使用 prototype 属性就可以给对象的构造函数添加新的方法: <sample title="" desc="" lang="html" hererun="1"> function Person(first, last, age, eyecolor) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eyecolor; } Person.prototype.name = function() { return this.firstName + " " + this.lastName; }; </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> </head> <body> <h2>JavaScript 对象</h2> <p id="demo"></p> <script> function Person(first, last, age, eye) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eye; } Person.prototype.name = function() { return this.firstName + " " + this.lastName }; var myFather = new Person("John", "Doe", 50, "blue"); document.getElementById("demo").innerHTML = "我的父亲是 " + myFather.name(); </script> </body> </html> </run>
返回至“
JavaScript prototype
”。
上一节:
JavaScript_对象
下一节:
JavaScript_Number_对象