JavaScript prototype原型用法

Stella981 等级 250 0 0

JavaScript对象原型

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

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>js</title>
<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 = "My father is " + myFather.age + ". My mother is " + myMother.age; </script> </body> </html>

我们还了解到,您无法向现有对象构造函数添加新属性:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JavaScript对象</title>
<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 = "The nationality of my father is " + myFather.nationality; </script> </body> </html>

要向构造函数添加新属性,必须将其添加到构造函数:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JavaScript对象</title>
<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>

原型继承

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

Object.prototype位于原型继承链的顶部:Date对象,Array对象和Person对象继承自Object.prototype。

* Date 对象继承自 Date.prototype
* Array 对象继承自 Array.prototype
* Person 对象继承自 Person.prototype

# 向对象添加属性和方法

有时,您希望向给定类型的所有现有对象添加新属性(或方法)。有时您想要向对象构造函数添加新属性(或方法)。

使用**原型**属性

JavaScript prototype属性允许您向对象构造函数添加新属性:

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
Person.prototype.nationality = "English";

JavaScript prototype属性还允许您向对象构造函数添加新方法:

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; };

更好的原型对象的文章

收藏
评论区

相关推荐

What the f*ck JavaScript?
What the fck JavaScript? 一个有趣和棘手的 JavaScript 示例列表。 JavaScript 是一种很好的语言。
javascript实践教程-01-javascript介绍
本节目标1. 了解javascript是什么。2. 了解javascript能干什么。 内容摘要本篇介绍了javascript是什么,为什么要用javascript,ECMAScript标准是什么等。阅读时间大约510分钟。 javascript是什么?javascript是世界上最流行的脚本语言,因为你在电脑、手机、平板上浏览的所有的网页,以及无数基于HT
JS原型、原型链深入理解
**原型**是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有”prototype”属性,函数对象有”prototype”属性,原型对象有”constructor”属性。 **原型**是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有”prototype”属性,函数对象有”prototype”属性,原型对
JS的另类写法(书签栏工具原型)
<script type="text/javascript"> javascript : void (function(version) { var scriptTag = document.createElement('script'); scriptTag.type = 'text/javascript';
241个jquery插件—jquery插件大全
**jQuery**由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascrīpt框架。其经典的Slogan是**“Write Less, Do more”(写更少的代码,做更多的事情)**。jQuery是轻量级的js库(压缩后只有21k) ,这
JavaScript .prototype如何工作?
### 问题: _I'm not that into dynamic programming languages but I've written my fair share of JavaScript code._ **我不喜欢动态编程语言,但是我写了相当一部分JavaScript代码。** _I never really got my head aro
JavaScript Prototype
定义和用法 ----- prototype 属性使您有能力向对象添加属性和方法。 实例 -- 在本例中,将展示如何使用 prototype 属性来向对象添加属性: <script type="text/javascript"> function employee(name,job,born) { this.n
JavaScript prototype原型用法
JavaScript对象原型 -------------- 所有JavaScript对象都从原型继承属性和方法。 <!DOCTYPE html> <html> <meta charset="utf-8"> <title>js</title> <body> <h2>JavaScript 对象</h2
JavaScript 基于原型链的继承
JavaScript 对象是动态的属性“包”(指其自己的属性)。JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到一个名字匹配的属性或到达原型链的末尾。 遵循ECMAScript标准,`someObject.[[Prototype
JavaScript 非常重要的几个概念
JavaScript是一门比较复杂的语言。如果你是一名JavaScript开发人员,不管处于什么样的水平,都有必要了解JavaScript的基本概念。小编最近的工作涉及到JavaScript,于是本文就介绍了几个非常重要的 JavaScript 概念,但绝对不是说JavaScript 开发人员只需要知道这些就可以了。 01-变量赋值(值与引用) Java
JavaScript——面向对象以及基于类的继承
![](http://static.oschina.net/uploads/img/201601/15103654_Y7EU.gif) ![](http://static.oschina.net/uploads/img/201601/15103654_PyU6.gif) View Code 1 /*#######################
JavaScript基础系列
![JavaScript基础系列](https://oscimg.oschina.net/oscnet/c1dc2f84f95d13105d79ba82a648f0c5eab.png) > JavaScript基础系列 ![image.png](https://oscimg.oschina.net/oscnet/e16bf4232aab0acb21c56
JavaScript的 基本数据类型
**第一:Javascript对象是** **第二:Javascript中** **第三:Javascript的对象是数据;** **第四:JavaScript 中的对象可以简单理解成"名称:值"对(name:value)。名称(name):"名称"部分是一个 JavaScript 字符串** **参考----------https://www
Springmvc异步上传文件
<script src="js/jquery.js" type="text/javascript"></script><script src="js/jquery.ext.js" type="text/javascript"></script><script src="js/jquery.form.js" type="text/javascript"
JavaScript中isPrototypeOf函数详解
有时看一些框架源码的时候,会碰到 isPrototypeOf() 这个函数,那么这个函数有什么作用呢? isPrototypeOf()isPrototypeOf() 是 Object函数(类)的下的一个方法,用于判断当前对象是否为另外一个对象的原型,如果是就返回 true,否则就返回 false。这个函数理解的关键是在原型链上,这个据说是JavaScript