JavaScript原型继承之基础机制分析
更新时间：2011年08月26日 00:43:05 作者：
由于语言设计上的原因，JavaScript 没有真正意义上“类”的概念。而通常使用的 new 命令实例化对象的方法，其实是对原型对象的实例化。
这一语言功能的本质依赖于 JavaScript 特有的原型链(prototype chain)模式。
所以严格意义上说，JavaScript 是基于原型的面向对象语言。也就是说，每个实例对象都具有一个原型。对象从该原型中继承属性和方法。
1、构造函数
利用构造函数，可以简单地创建对象。构造函数内的 this 关键字指向实例对象本身：
function People(name){
this.name = name;
}
使用 new 运算符和构造函数创建实例对象：
var people = new People('小明');
console.log(people.name); //小明
但如果创建了两个实例，这两个实例之间无法直接共享属性和方法：
var people1 = new People('小明');
var people2 = new People('小王');
people1.sex = 'male';
console.log(people2.sex); //undefined
也就是说对象一旦被实例化，其属性方法都独立存在，对某个属性的修改不会影响到其他实例。
2、Prototype
于是就有了 prototype 属性，这个属性是在生成实例对象时自动创建的。它本身又是一个对象，拥有能够在实例间共享的属性和方法。而实例本身的属性和方法，则包含在构造函数中。换句话说，构造函数内部的属性和方法，在经过实例化后都成为了本地的属性和方法，而原型(prototype)中的属性和方法在实例中只是一种引用，因此能够被多个实例共享。
还是刚才那个构造函数，现在为它增加 prototype 属性：
People.prototype.sex = 'female';
//或者写成 People.prototype = {sex: 'female'};
console.log(people1.sex); //male
console.log(people2.sex); //female
People 构造函数的 prototype 属性参数会直接影响到 people1 和 people2 两个实例。
但为什么 people1.sex 输出 male 呢?这是由于在 JavaScript 中，原型关系以递归形式存在。对象的原型也是一个对象，而原型的本身也可能具有一个原型。原型的最高层级是全局的 Object 对象。
这就是说，一旦 people1.sex 被设置为 male 后，它在原型中对应的值就无法被暴露出来。假如 people1.sex 本身没有值，才会从构造函数的 prototype 属性中读取，以此类推一级一级向上查找，直到 Object 对象。
注：使用 “null” 给对象赋值，可以销毁自定义对象，释放内存资源。
所以严格意义上说，JavaScript 是基于原型的面向对象语言。也就是说，每个实例对象都具有一个原型。对象从该原型中继承属性和方法。
1、构造函数
利用构造函数，可以简单地创建对象。构造函数内的 this 关键字指向实例对象本身：
复制代码 代码如下:
function People(name){
this.name = name;
}
使用 new 运算符和构造函数创建实例对象：
复制代码 代码如下:
var people = new People('小明');
console.log(people.name); //小明
但如果创建了两个实例，这两个实例之间无法直接共享属性和方法：
复制代码 代码如下:
var people1 = new People('小明');
var people2 = new People('小王');
people1.sex = 'male';
console.log(people2.sex); //undefined
也就是说对象一旦被实例化，其属性方法都独立存在，对某个属性的修改不会影响到其他实例。
2、Prototype
于是就有了 prototype 属性，这个属性是在生成实例对象时自动创建的。它本身又是一个对象，拥有能够在实例间共享的属性和方法。而实例本身的属性和方法，则包含在构造函数中。换句话说，构造函数内部的属性和方法，在经过实例化后都成为了本地的属性和方法，而原型(prototype)中的属性和方法在实例中只是一种引用，因此能够被多个实例共享。
还是刚才那个构造函数，现在为它增加 prototype 属性：
复制代码 代码如下:
People.prototype.sex = 'female';
//或者写成 People.prototype = {sex: 'female'};
console.log(people1.sex); //male
console.log(people2.sex); //female
People 构造函数的 prototype 属性参数会直接影响到 people1 和 people2 两个实例。
但为什么 people1.sex 输出 male 呢?这是由于在 JavaScript 中，原型关系以递归形式存在。对象的原型也是一个对象，而原型的本身也可能具有一个原型。原型的最高层级是全局的 Object 对象。
这就是说，一旦 people1.sex 被设置为 male 后，它在原型中对应的值就无法被暴露出来。假如 people1.sex 本身没有值，才会从构造函数的 prototype 属性中读取，以此类推一级一级向上查找，直到 Object 对象。
注：使用 “null” 给对象赋值，可以销毁自定义对象，释放内存资源。
相关文章
这篇文章主要介绍了如何使用pm2快速将项目部署到远程服务器，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
上传图片前预览图片这种效果应用比较广泛，实现的方也大同小异，下面为大家介绍下，在javascript中是如何实现的，感兴趣的朋友可以参考下2013-10-10
今天小编就为大家分享一篇bootstrap动态调用select下拉框的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
下面小编就为大家带来一篇在javascript中使用com组件的简单实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦2016-08-08
Hooks让我们为相同的功能编写更少的代码,我们需要编写的代码越少,我们就可以越快地启动应用程序,hooks需要在函数组件中使用,您不能在 React 类中使用 hooks,函数式的 React 组件更加现代,并支持有用的 hooks,现在流行把旧式的类组件转换为函数式组件2024-01-01
这篇文章主要为大家详细介绍了JavaScript如何模拟实现Promise功能，文中的示例代码讲解详细，对我们学习JavaScript有一定的帮助，需要的可以参考一下2022-12-12
之前看到一个Android的加载效果不错，一直想自己动手做一个，正好这段时间重温了一个Canvas，所以就尝试了一下。下面这篇文章主要给大家介绍了关于利用canvas实现加载效果的相关资料，需要的朋友可以参考下。2017-07-07
深入浅析JavaScript中的arguments对象(强力推荐)
这篇文章主要介绍了JavaScript中的arguments对象(强力推荐)的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-06-06
bootstrap组件在前端开发中经常会用到，今天小编通过本文给大家分享bootstrap组件之进度条的基本用法，需要的朋友参考下吧2017-01-01
这篇文章主要介绍了JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果,涉及JavaScript动态判断页面元素位置及样式设置技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
最新评论