关于Javascript中通过实例对象修改原型对象属性值的问题
Javascript中的数据值有两大类:基本类型的数据值和引用类型的数据值。
基本类型的数据值有5种:null、undefined、number、boolean和string。
引用类型的数据值往大的说就1种,即Object类型。往细的说有:Object类型、Array类型、Date类型、Regexp类型、Function类型等。
当原型对象的属性值为基本类型的数据值时,通过实例对象修改属性值从而引起原型对象的属性值发生变化的情况不会发生。当原型对象的属性值为引用类型的数据值时,通过实例对象修改属性值就可能引起原型对象的属性值发生变化。下面举例说明。
例1:
function Animal() {}
Animal.prototype = {
constructor: Animal,
number: "very much",
fish: ["shark","sardine"],
bird:{
ability: "fly",
feature: "feather"
}
};
var animal1 = new Animal();
var animal2 = new Animal();
//没有改变原型的number属性,而是自己获得了number属性
animal1.number = 1000;
console.log(animal2.number);//very much
上例中通过构造函数Animal创建了两个实例对象,两个实例对象继承了同一个原型对象的属性。通过实例对象animal1重新设置了number属性,结果是实例对象animal1拥有了自己的number属性,没有改变原型对象的number属性值,实例对象animal2调用的number属性还是原型对象原来的number属性。
例2:
function Animal() {}
Animal.prototype = {
constructor: Animal,
number: "very much",
fish: ["shark","sardine"],
bird:{
ability: "fly",
feature: "feather"
}
};
var animal1 = new Animal();
var animal2 = new Animal();
var animal3 = new Animal();
//没有改写原型中的fish属性,此时animal1实例对象中有了自己的fish属性,向其自己的fish属性中推入和弹出项不会改变原型的fish属性。
animal1.fish = ["cold fish"];
for (var i=0;i<animal2.fish.length;i++) {
console.log(animal2.fish[i]);//shark,sardine,没有cold fish
}
//通过实例对象animal3向fish属性中推入项,改变了原型对象的fish属性,因为实例对象中没有自己的fish属性
animal3.fish.push("voladao");
animal3.fish[0] = "fly fish";
for (var i=0;i<animal2.fish.length;i++) {
console.log(animal2.fish[i]);//fly fish,sardine,voladao
}
例2中实例对象animal1创建了自己的fish属性,没有改变原型对象的fish属性,所以实例对象animal2输出的还是原型对象的fish属性。
实例对象animal3没有自己的fish属性,但通过实例对象animal3向fish属性中推入了一项,并且改变了其中的第一项的值,这些改变都发生在了原型对象的fish属性上,所以实例对象animal2调用fish属性时,其属性值发生了变化。
例3:
function Animal() {}
Animal.prototype = {
constructor: Animal,
number: "very much",
fish: ["shark","sardine"],
bird:{
ability: "fly",
feature: "feather"
}
}
var animal1 = new Animal();
var animal2 = new Animal();
var animal3 = new Animal();
var animal4 = new Animal();
var animal5 = new Animal();
//改写了原型中的bird属性
animal1.bird.ability = "run";
console.log(animal2.bird.ability);//run
//创建animal3的bird属性,没有改变原型对象的bird属性
animal3.bird = {
eat: "fish"
};
console.log(animal4.bird.eat);//undifined
console.log(animal3.bird.eat);//fish
animal5.bird.home = "tree";
console.log(animal4.bird.home);//tree
例3中通过实例对象animal1修改了bird属性的ability属性的值,实例对象animal1没有自己的bird属性,这个修改反映在了原型对象的bird属性上,实例对象animal2输出的bird.ability的值是改变后的值。
实例对象animal3创建了自己的bird属性,这没有改变原型对象的bird属性,所以实例对象4的bird.eat的值为undifined。
通过实例对象animal5添加了bird属性的home属性,实例对象animal5没有自己的bird属性,这个home属性添加到了原型对象的bird属性上,所以animal4的bird.home的值为tree。
至于其他的引用类型的数据值有没有以上特性,暂时还没有想到怎么验证,先这样吧。
关于Javascript中通过实例对象修改原型对象属性值的问题的更多相关文章
- js高级——构造函数,实例对象和原型对象——prototype、__proto__和constructor构造器
一.前言 了解JavaScript面向对象,需要先了解三个名词: 构造函数,实例对象和原型对象. 注意:JavaScript中没有类(class)的概念,取而代之的是构造函数,两者类似却又有很大的差别 ...
- 怎样修改原型对象prototype
修改原型对象的方法分为两种情况, 一种是对原型对象的属性方法做增删改, 一种改变原型对象的指向. 第一种: 对原型对象的属性/方法做增删改 function Person(name){ this.na ...
- JS高级---构造函数,实例对象和原型对象,三者关系
构造函数,实例对象和原型对象,三者关系 构造函数里面有原型(prototype)属性,即原型对象 原型对象里的constryctor构造器指向构造函数 通过构造函数,实例化,创建的就是实例对象. 实例 ...
- JavaScript中两种类型的全局对象/函数【转】
Snandy Stop, thinking is the essence of progress. JavaScript中两种类型的全局对象/函数 这里所说的JavaScript指浏览器环境中的包括宿 ...
- JS对象 JavaScript 中的所有事物都是对象,如:字符串、数值、数组、函数等,每个对象带有属性和方法。
什么是对象 JavaScript 中的所有事物都是对象,如:字符串.数值.数组.函数等,每个对象带有属性和方法. 对象的属性:反映该对象某些特定的性质的,如:字符串的长度.图像的长宽等: 对象的方法: ...
- JavaScript学习系列博客_24_JavaScript 原型对象
原型(prototype) - 创建一个函数(所有函数)以后,解析器都会默认在函数中添加一个属性prototype prototype属性指向的是一个对象,这个对象我们称为原型对象. 创建一个函数My ...
- ListView与.FindControl()方法的简单练习 #2 -- ItemUpdting事件中抓取「修改后」的值
原文出處 http://www.dotblogs.com.tw/mis2000lab/archive/2013/06/24/listview_itemupdating_findcontrol_201 ...
- js sort方法根据数组中对象的某一个属性值进行排序(实用方法)
js sort方法根据数组中对象的某一个属性值进行排序 sort方法接收一个函数作为参数,这里嵌套一层函数用来接收对象属性名,其他部分代码与正常使用sort方法相同. var arr = [ {nam ...
- tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。
简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween. ...
随机推荐
- touchstart、touchmove、touchend 实现移动端上的触屏拖拽
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- .NET C#-- 利用BeginInvoke与EndInvoke完成异步委托方法并获取方法执行返回值示例
//定义委托 delegate string MyDelegate(string name); //定义委托调用函数 public string Hello(string name) { Thread ...
- 一篇关于匿名函数(function(){})()不错的文章
代码如下: (function(){ //这里忽略jQuery所有实现 })(); (function(){ //这里忽略jQuery所有实现 })(); 半年前初次接触jQuery的时候,我也像其他 ...
- .net 下新版highcharts本地导出图片bug处理
最近公司要用到highcharts这个插件来生成图表,所以我花了点时间研究了下. 现在最新的版本是3.0.2,这js插件居多优点就不比多说了,demo官网上也很详细.但是优点不爽的地方是,导出图片这个 ...
- ListView.setAdapter(adapter);空指针异常的解决的总结
报空指针异常一般的情况: 1,没有找到布局文件的ID 检验是不是id重复或者写错了 2.控件没有实例化 3.没有找到布局文件的id,要看看是不是加载了布局了,必须加载了对应的布局才能找到对应布局下的 ...
- Sort简单排序
List<T> 类型排序: public List<ProductionMaterialModel> OrderBybom(List<ProductionMaterial ...
- ABP理论学习之日志记录
返回总目录 本篇目录 服务端 获取Logger 基类中的Logger 配置 客户端 服务端 ABP使用的是Castle Windsor的日志记录设备.它可以和不同的日志类库一起工作,比如Log4Net ...
- Modern OpenGL用Shader拾取VBO内单一图元的思路和实现(3)
Modern OpenGL用Shader拾取VBO内单一图元的思路和实现(3) 到上一篇为止,拾取一个VBO里的单个图元的问题已经彻底解决了.那么来看下一个问题:一个场景里可能会有多个VBO,此时每个 ...
- 过段时间逐步使用HTML5新增的web worker等内容
想来快2017年了,2013年前的手机应该很少有人用了,以后逐渐使用HTML5新增的高级API吧. 先把web worker的内容再熟悉一下,因为微软虚拟学院的'面向有经验开发人员的 JavaScri ...
- php的函数和数组
//php函数//1.简单函数//四要素:返回类型,函数名,参数列表,函数体/*function Show(){ echo "hello";}Show();*///2.有返回 ...