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;

};

更好的原型对象的文章

JavaScript prototype原型用法的更多相关文章

  1. javascript prototype原型链的原理

    javascript prototype原型链的原理 说到prototype,就不得不先说下new的过程. 我们先看看这样一段代码: <script type="text/javasc ...

  2. JavaScript prototype原型和原型链详解

    用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了, ...

  3. JavaScript prototype原型链介绍

    javascript 是一种基于原型的编程 (prototype based programming) 的语言, 而与我们通常的基于类编程 (class based programming) 有很大的 ...

  4. javascript进阶-原型prototype

    一.javascript原型认识 很多编程语言都有类的概念,我们可以拿原型和类进行比较,看看它们之间的区别以及相同点在哪里. 1.类:类是一个具体事物的抽象所以类是一个抽象的东西,在面向对象中类可以用 ...

  5. JavaScript OOP（三）：prototype原型对象（即构造函数的prototype属性）

    通过构造函数生成的实例化对象,无法共享属性或方法(即每个实例化对象上都有构造函数中的属性和方法):造成了一定的资源浪费 function Obj(name,age){ this.name=name; ...

  6. java基础64 JavaScript中的Arrays数组对象和prototype原型属性（网页知识）

    1.Arrays数组对象的创建方式 方式一: var 变量名=new Array(); //创建一个长度为0的数组. 方式二: var 变量名=new Array(长度); //创建一个指定长度的数组 ...

  7. JavaScript的原型链继承__propt__、prototype、constructor的理解、以及他们之间相互的关系。

    回想自己已经工作了有一段时间了,但是自己对JavaScript的原型链.和继承的理解能力没有到位,最近他们彻底的整理并且复习了一遍. 本案例中部分文案来自网络和书籍,如有侵权请联系我,我只是把我的理解 ...

  8. JavaScript 面向对象 原型(prototype) 继承

    1.对象的概念:无需属性的集合,属性可以为数值,对象或函数,ECMAscript中没有类的概念,这点是javascript与其他面向对象(OO)语言不同的地方. //创建一个自定义对象 var per ...

  9. 理解 JavaScript 对象原型、原型链如何工作、如何向 prototype 属性添加新的方法。

    JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象拥有一个原型对象,对象以其原型为模板.从原型继承方法和属性.原型对象也可能拥有原型, ...

随机推荐

  1. GitHub 总是打不开，网再好也米有用，怎么办？

    所用方法:修改host文件 一.键入网址:http://github.global.ssl.fastly.net.ipaddress.com/#ipinfo 拿到github.global.ssl.f ...

  2. （一）创建新的react native 应用程序

    最近开始学习ReactNative了,首先了解下ReactNative http://wiki.jikexueyuan.com/project/react-native/GettingStarted. ...

  3. 【LeetCode】1056-易混淆数

    易混淆数 给定一个数字 N,当它满足以下条件的时候返回 true:把原数字旋转180°以后得到新的数字.如 0, 1, 6, 8, 9 旋转 180° 以后,得到了新的数字 0, 1, 9, 8, 6 ...

  4. [PHP] vscode配置SFTP扩展同步文件

    在我们的项目开发过程中,经常有一种模式,有一台linux的开发机作为我们的测试机器,上面安装了ftp服务.我们在windows系统的本地机器使用IDE编写代码,自动或者保存时同步上传到测试机下,这样就 ...

  5. python爬虫（1）——正则表达式

    原子 原子是正则表达式中最基本的组成单位,每个正则表达式中至少要包含一个原子. 常见的原子类型: 普通字符作为原子 非打印字符作为原子 通用字符作为原子 原子表 #普通字符作为原子 import re ...

  6. 使用Azure进行自动化机器学习

    什么是自动化机器学习? 自动化的机器学习,也称为 AutoML,让数据科研人员. 分析人员和开发人员,同时维护模型质量构建具有高缩放性. 效率和工作效率的机器学习模型. 自动化机器学习生成的机器学习模 ...

  7. 初学JavaScript正则表达式(四)

    字符类 [] 一般情况下正则表达式中一个字符对应字符串一个字符 可以使用元字符 [ ] 来构建一个简单的类        类泛指符合某些特征的对象 例: 'a1b1c1d1'.replace(/[ab ...

  8. Jenkins显示reportng测试报告

    在搭建Jenkins自动化测试平台后,我们点击立即构建就可以运行测试用例了,但没有地方查看测试报告,现在写这篇博客总结怎么在Jenkins显示reportng测试报告. 在maven项目配置repor ...

  9. 201871010113-刘兴瑞《面向对象程序设计（java）》第二周学习总结

    项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>    https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址> ...

  10. miniapp之登录、授权和支付

    微信小程序代码实现(登录.授权和支付) ==整体流程看上一篇博客,或者去微信公众平台查看文档== ==只列出核心代码,详细代码见码云michaelben== 登录 // //小程序端 // app.j ...