关于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. ...
随机推荐
- jGestures: jQuery的手势事件插件
官网地址:http://jgestures.codeplex.com/文档版本号: v0.7,由neuedigitale编辑,2012年5月8日最新稳定版: jGestures v0.90 - sha ...
- [SQLServer大对象]——FileTable从文件系统迁移文件
阅读导航 从文件系统中迁移文件到FileTable 批量加载文件到FileTable 如何批量加载文件到FileTable 通过博文[SQLServer大对象]——FileTable初体验,已经可以将 ...
- 深圳本土web前端经验交流
群号:125776555 深圳本土web前端技术交流群 baidu tencent前端拒绝垃圾广告.吹水,欢迎讨论技术.跳槽经验期待您的加入
- vmware 安装xp 流水账
1. 分区 PQ分区.1个区,C盘,NTFS. 2. 安装XP 进入ghost,不要选择一键. 然后fromImage, d:\xxx\GHO
- Hadoop学习路线图
Hadoop家族产品,常用的项目包括Hadoop, Hive, Pig, HBase, Sqoop, Mahout, Zookeeper, Avro, Ambari, Chukwa,新增加的项目包括, ...
- DDN - Digital Data Network
DDN(Digital Data Network,数字数据网)是一种利用光纤.数字微波或卫星等数字传输通道和数字交叉复用设备组成的数字数据传输网.它可以为用户提供各种速率的高质量数字专用电 数字数据网 ...
- xamarin UWP自定义圆角按钮
uwp自带的button本身不支持圆角属性,所以要通过自定义控件实现. 通过设置Button的Background=“{x:Null}”设置为Null使背景为空,再设置Button.Content中的 ...
- Spring学习记录(二)---容器和bean属性配置
下载spring包,在eclipse搭建spring环境. 这步我在eclipse中无法导入包,看网上的: http://sishuok.(和谐)com/forum/blogPost/list/242 ...
- 有关binlog的那点事(mysql5.7.13)
binlog作为mysql中最重要的日志之一,能实现异常恢复以及主从复制. 我们主要讨论的是主从复制中的binlog,这里将以mysql5.7.13的源码为主要依据来分析binlog. 在主从复制中, ...
- 解读sencha touch移动框架的核心架构(一)
sencha的前身就是Extjs了,sencha 框架是世界上第一个基于HTML5的Mobile App框架 那么何谓框架,传统软件工程对于库和框架的区分主要着眼于对应用运行流程的控制权,框架提供架构 ...