js修改原型的属性使用介绍

 原型(prototype)定义了特定类型的所有实例都可以访问的属性和方法,很多些情况下需要重新对原型中的属性赋值,下面为大家介绍下如何修改原型

在javascript中原型(prototype)定义了特定类型的所有实例都可以访问的属性和方法,很多些情况下需要重新对原型中的属性赋值,如果方法错误会导致一些意想不到的情况(仅仅是对像我这样的新手奋斗),下面通过测试对这部分知识做一个简单的总结。 
 
基本类型定义如下: 
 代码如下:
function Person(){} 
 
Person.prototype={ 
constructor:Person, 
name:"person", 
age:100, 
friends:["a","b"], 
getName:function(){ 
return this.name; 

}; 
 
定义两个Person的实例,修改实例中的name属性(该属性是在prototype中定义的),测试代码如下 
代码如下:
var p1=new Person(); 
var p2=new Person(); 
 
document.write(p1.name+"<br/>"); //person 
document.write(p2.name+"<br/>"); //person 
 
p1.name="p1"; 
document.write(p1.name+"<br/>"); //p1 
document.write(p2.name+"<br/>"); //person 
 
document.write(p1.hasOwnProperty("name")+"<br/>"); //true 属于对象 
document.write(p2.hasOwnProperty("name")+"<br/>"); //false 属于原型 
 
document.write(Object.keys(p1)+"<br/>"); //name 
document.write(Object.keys(p2)+"<br/>"); // 空 
document.write(Object.getOwnPropertyNames(Person.prototype)+"<br/>"); //constructor,name,age,friends,getName 
document.write(Person.prototype.name+"<br/>"); //person 
 
经过测试可以发现p1.name="p1"并不是修改了name的值而是在实例p1中新增加了一个name属性覆盖了prototype中的name属性,从后续的判断中就可以看出这时候p1的name属性已经是一个实例属性而不是原型属性,后面的Object.keys(p1)也可以看出p1这个实例中多了一个name属性而p2中没有。在js中所有的传递都是值传递,这个值可以是个指向引用类型的指针,所以等号并不意味着修改这个引用对象,而是切换了原来的引用关系,下面再通过代码说明这个问题 
代码如下:
var obj=new Object(); 
obj.name="obj"; 
 
function changeObj(o){ 
o.name="changed"; 
o=new Object(); 
o.name="newObj"; 

changeObj(obj); 
 
document.write(obj.name); //changed 
 
在changedObj方法中o=new Object()并没有修改参数o的值,而是切断了原来的引用关系,所以结果并不是newObj而是changed 
 
接下来测试一下修改第一个例子中prototype中的friends属性,这个属性是一个引用类型 
 代码如下:
p1.friends.push("c"); 
document.write(p1.friends+"<br/>"); //a,b,c 
document.write(p2.friends+"<br/>"); //a,b,c 
 
p1.friends=["x","y","z"]; 
document.write(p1.friends+"<br/>"); //x,y,z 
document.write(p2.friends+"<br/>"); //a,b,c 
 
document.write(p1.hasOwnProperty("friends")+"<br/>"); //true 属于对象 
document.write(p2.hasOwnProperty("friends")+"<br/>"); //false 属于原型 
 
document.write(Object.keys(p1)+"<br/>"); //name,friend 
document.write(Object.keys(p2)+"<br/>"); //空 
document.write(Object.getOwnPropertyNames(Person.prototype)+"<br/>"); //constructor,name,age,friends,getName 
document.write(Person.prototype.friends+"<br/>"); //a,b,c 
 
这次测试结果与第一次的测试基本相同,当通过等号修改时,这时候会切断原来的引用并为实例创建一个新的属性且覆盖了prototype中的同名属性 
 
基于这两个测试结果发现在实例中不能直接修改prototype中的值类型属性(当然这种值类型不应该定义在prototype,这里的代码实例仅仅说明这个知识点,并无实际意义) 
 

时间: 2025-01-01 00:50:18

js修改原型的属性使用介绍的相关文章

js修改原型的属性使用介绍_javascript技巧

在javascript中原型(prototype)定义了特定类型的所有实例都可以访问的属性和方法,很多些情况下需要重新对原型中的属性赋值,如果方法错误会导致一些意想不到的情况(仅仅是对像我这样的新手奋斗),下面通过测试对这部分知识做一个简单的总结. 基本类型定义如下: 复制代码 代码如下: function Person(){} Person.prototype={ constructor:Person, name:"person", age:100, friends:["a

JS构造函数与原型prototype的区别介绍_javascript技巧

构造函数方法很好用,但是存在一个浪费内存 通过原型法分配的函数是所有对象共享的. 通过原型法分配的属性是独立.-----如果你不修改属性,他们是共享 如果我们希望所有的对象使用同一一个函数,最好使用原型法添加函数,这样比较节省内存. 例子: //----构造函数模式 为Cat对象添加一个不变的属性"type"(种类),再添加一个方法eat(吃老鼠).那么,原型对象Cat就变成了下面这样: <script> function Cat(name, color) { this.n

js修改input的type属性及浏览器兼容问题探讨与解决_javascript技巧

js修改input的type属性有些限制.当input元素还未插入文档流之前,是可以修改它的值的,在ie和ff下都没问题.但如果input已经存在于页面,其type属性在ie下就成了只读属性了,不可以修改.在ff下仍是可读写属性. 今天遇到个问题,输入框有默认值"密码",但获得焦点时,"密码"两字会去掉,输入时直接变成"****"的password类型.很明显,一开始的时候,input的类型是text,后来变成了password类型.直观的思路是

js修改input的type属性问题探讨_javascript技巧

js修改input的type属性有些限制.当input元素还未插入文档流之前,是可以修改它的值的,在ie和ff下都没问题.但如果input已经存在于页面,其type属性在ie下就成了只读属性了,不可以修改.在ff下仍是可读写属性. 今天遇到个问题,输入框有默认值"密码",但获得焦点时,"密码"两字会去掉,输入时直接变成"****"的password类型.很明显,一开始的时候,input的类型是text,后来变成了password类型.直观的思路是

js中的内部属性与delete操作符介绍_javascript技巧

在讲解Configurable之前,我们首先来看一道面试题: a = 1; console.log( window.a ); // 1 console.log( delete window.a ); // true console.log( window.a ); // undefined var b = 2; console.log( window.b ); // 2 console.log( delete window.b ); // false console.log( window.b

Selenium web driver 使用JS修改input属性

selenium获取input时候,发现type="hidden" 的input无法修改value,经牛人指点,可以使用js修改 首先html源文件如下,设置为text .hidden.submit View Code 在浏览器加载之后如下: 这时候email 不能对外显示 使用selenium,代码如下 1 import org.openqa.selenium.Alert; 2 import org.openqa.selenium.JavascriptExecutor; 3 impo

JS 修改URL参数

本篇文章是对JS修改URL参数的实现代码进行了详细的分析介绍,需要的朋友参考下   复制代码 代码如下: function changeURLPar(url, ref, value) {     var str = "";     if (url.indexOf('?') != -1)         str = url.substr(url.indexOf('?') + 1);     else         return url + "?" + ref + &

js动态调用css属性的小规律

 本篇文章主要介绍了js动态调用css属性的小规律及实例说明.需要的朋友可以过来参考下,希望对大家有所帮助 刚才看到一篇好的文章介绍js调用css属性,( ^_^ )不错嘛!免的自己忘记,总结一下   1.对于没有中划线的css属性一般直接使用style.属性名即可.   如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position等.   2.对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成

js利用数组length属性清空和截短数组的小例子

 这篇文章主要介绍了js利用数组length属性清空和截短数组的小例子,有需要的朋友可以参考一下 1.使用length清空数组:    代码如下: <script>     var arr1 = ['aaa','bbbb','http://www.jb51.net'];     alert(arr1);     arr1.length = 0;     alert(arr1); //数组为空 </script>     2.使用length截短数组:    代码如下: <sc