【JavaScript高级教程】JavaScript prototype（原型对象）

所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法。

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");

我们也知道在一个已存在构造器的对象中是不能添加新的属性，要添加一个新的属性需要在在构造器函数中添加：

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

prototype 继承

所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法：

Date 对象从 Date.prototype 继承。
Array 对象从 Array.prototype 继承。
Person 对象从 Person.prototype 继承。

所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例。

JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。

Date 对象, Array 对象, 以及 Person 对象从 Object.prototype 继承。

添加属性和方法

有的时候我们想要在所有已经存在的对象添加新的属性或方法。

另外，有时候我们想要在对象的构造函数中添加属性或方法。

使用 prototype 属性就可以给对象的构造函数添加新的属性：

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

当然我们也可以使用 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高级教程】JavaScript prototype（原型对象）相关推荐

JavaScript高级 |彻底搞懂原型对象
本文已收录于专栏 ⭐️ <JavaScript>⭐️ 学习指南: 对象的原型函数的原型 new操作符将方法放原型里 constructor 总结梳理原型对象内存表现完结散花参考 ...
尚硅谷JavaScript高级教程(javascript实战进阶)学习笔记
前言这个是我学习过程中的笔记,分享给大家,希望对大家有用. 学习内容是尚硅谷JavaScript高级教程(javascript实战进阶),这里是视频链接. 我在前面有两篇对于web前端HTML和CS ...
菜鸟教程之 JavaScript 高级教程
From:https://www.runoob.com/js/js-objects.html JavaScript 对象 JavaScript 中的所有事物都是对象:字符串.数值.数组.函数... ( ...
JavaScript高级之构造函数和原型
1.1 概述在典型的 OOP 的语言中(如 Java),都存在类的概念,类就是对象的模板,对象就是类的实例,但在 ES6之前, JS 中并没用引入类的概念. ES6, 全称 ECMAScript 6 ...
JavaScript强化教程——JavaScript Math（算数）对象
为什么80%的码农都做不了架构师?>>> 本文为 H5EDU 机构官方 HTML5培训教程,主要介绍:JavaScript强化教程 -- JavaScript Math(算数 ...
视频教程-ThreeJS 3D高级教程-JavaScript
ThreeJS 3D高级教程网名:海洋,CSDN社区讲师,3D游戏引擎开发者,IT讲师,计算机图形学方向研究生,曾在浙江大学CAD&CG;国家重点实验室学习.从事IT行业15年,主导或参与了 ...
JavaScript强化教程 —— JavaScript 总结
本文为 H5EDU 机构官方 HTML5培训教程,主要介绍:JavaScript强化教程 -- JavaScript 总结本教程中我们向您讲授了如何向 html 页面添加 JavaScript,使 ...
JavaScript强化教程——JavaScript 总结
本教程中我们向您讲授了如何向 html 页面添加 JavaScript,使得网站的动态性和交互性更强. 你已经学习了如何创建对事件的响应,验证表单,以及如何根据不同的情况运行不同的脚本. 你也学到了如 ...
JavaScript强化教程——JavaScript 运算符
本文为 H5EDU 机构官方 HTML5培训教程,主要介绍:JavaScript强化教程 -- JavaScript 运算符 JavaScript 算术运算符算术运算符用于执行两个变量或值的运算 ...

【JavaScript高级教程】JavaScript prototype（原型对象）

prototype 继承

添加属性和方法

【JavaScript高级教程】JavaScript prototype（原型对象）相关推荐

最新文章

热门文章