脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript prototype属性

javascript中的prototype属性实例分析说明

 更新时间：2010年08月09日 23:39:45   作者：  
一说到prototype很多人可能第一个想到的是著名的prototype.js框架，当然我们今天说的不是它，而是Javascript中的prototype属性，一般都被翻译为“原型”。这是一个比较特殊的属性，Javascript中的继承一般都依赖这属性实现。
在Javascript中，一切都是对象，字符串是对象，数组是对象，变量是对象，函数也是对象，所以才会允许['a','b','c'].push('d');这样的操作存在。类本身也是一个对象，也可以定义属性和方法：
复制代码 代码如下:

function Test(){};
Test.str = 'str';
Test.fun = function(){return 'fun';};

var r1 = Test.str; // str
var r2 = Test.fun(); // fun

var inst = new Test();
var r3 = inst.str; // undefined
var r4 = inst.fun(); // undefinedprototype就是一个作用于类的属性。默认情况下，所有Javascript类都会有一个prototype属性，但是类实例没有。

function Test(){};

var p1 = typeof(String.prototype); // object
var p2 = typeof(Test.prototype); // object
var p3 = typeof(new Test().prototype); // undefined

var p4 = typeof(Object.prototype); // object
var p5 = typeof(new Object().prototype); // undefined取值与赋值

在Javascript中，当我们取一个对象中并不存在的属性或是方法时，它会试图查看该对象所对应的类中的prototype属性中是否包含该属性或是方法，而prototype也是一个Javascript对象，若是其中也没有，该prototype又会访问它对应的类的prototype，如此一级级地向上访问，直到找到需要的属性或方法，或是prototype属性为null。
复制代码 代码如下:

function Test(){};
Test.test = 'str';

function pt1()
{ this.test1 = 'pt1'; };

function pt2()
{ this.test2 = 'pt2'; };
pt2.prototype.test3 = 'test3';
pt2.prototype.test1 = 'test4';

pt1.prototype = new pt2();
Test.prototype = new pt1();
var inst = new Test();

var p1 = inst.test; // undefined
var p2 = inst.test1; // pt1 而不是 test4
var p3 = inst.test2; // pt2
var p4 = inst.test3; // test3相对于取值，赋值就简单得多了。

它并不会一层层向上查找prototype中的属性值，而直接对当前的实例进行赋值，没有则创建。

内置类的增强
在Javascript中并不能直接修改内置类的prototype。但是可以通过修改prototype的属性达到修改内置类行为的目的。
复制代码 代码如下:

Array.prototype = {push:function(){alert('test1');}}; // 不起作用
Array.prototype.push = function(){alert('test2');}; // 可以
var test = new Array('a','b','c');
test.push('d'); // test2一次可以插入多个元素的Array.push函数：

Array.prototype.pushs = function()
{
var pos = this.length;
for(var i=0; i<arguments.length; i++)
{
this[++pos] = arguments[i];
}
return this.length;
}
var test = new Array('a','b','c');
test.pushs('d','e');

值得注意的是，为内置类的prototype添加的函数，在使用for语句输出属性时，也会被显示：
复制代码 代码如下:

var str;
for(var i in test)
{
str += (' ' + i); // '0 1 2 3 4 5 pushs' pushs自定义函数。
}

但是可以通过hasOwnProperty()进行判断：
复制代码 代码如下:

var str;
for(var i in test)
{
if(test.hasOwnProperty(i)) // 过滤掉pushs函数。
{ str += (' ' + i); }
}

一点点注意事项
前面说过，prototype是类的一个属性。更改prototype中的属性值，有可能会带来意想不到的灾难！
复制代码 代码如下:

function Test(){}
Test.prototype.num = 3;

var inst1 = new Test();
var inst2 = new Test();

Test.prototype.num = 4; // 所有指向Test.prototype.num的值。
var p1 = inst1.num; // 4
var p2 = inst2.num; // 4

inst1.num = 5; // 赋值，会为inst对象创建一个num属性。
Test.prototype.num = 6; // 所有指向Test.prototype.num的值。
var p3 = inst1.num; // 5 这里返回的是刚创建的inst1.num的值，而不是Test.prototype.num的值。
var p4 = inst2.num; // 6

delete Test.prototype.num;
var p5 = inst1.num; // 5 inst1.num依然存在。
var p6 = inst2.num; // undefined Test.prototype.num 被删除了。
您可能感兴趣的文章:

相关文章

  • layui表格分页 记录勾选的实例

    layui表格分页 记录勾选的实例

    今天小编就为大家分享一篇layui表格分页 记录勾选的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • js Object2String方便查看js对象内容

    js Object2String方便查看js对象内容

    这篇文章主要介绍了将JS的任意对象输出为json格式字符串的方法,需要的朋友可以参考下
    2014-11-11
  • javascript跨域刷新实现代码

    javascript跨域刷新实现代码

    在XX项目里面需要通过一个iframe去刷新同一窗口的另外一个iframe。一个超级简单的处理，但我还在blog上记一记，有些看似简单的东西，在真实项目应用中还是值得思考地方
    2011-01-01
  • JS数组实现分类统计实例代码

    JS数组实现分类统计实例代码

    本文通过实例代码给大家介绍了js数组实现分类统计的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • JS实现带动画的回到顶部效果

    JS实现带动画的回到顶部效果

    这篇文章主要为大家详细 介绍了JS实现带动画的回到顶部效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-12-12
  • 在使用JSON格式处理数据时应该注意的问题小结

    在使用JSON格式处理数据时应该注意的问题小结

    这篇文章主要介绍了在使用JSON格式处理数据时应该注意的问题，非常不错，具有参考借鉴价值,需要的朋友可以参考下
    2017-05-05
  • 在JavaScript中使用for循环的方法详解

    在JavaScript中使用for循环的方法详解

    在本文中，我们将学习 JavaScript 中提供，的 for 循环，我们将了解如何在 JavaScript 中使用 for...in 循环语句、其语法、工作原理示例、何时使用或避免使用它以及我们可以使用哪些其他类型的循环,需要的朋友可以参考下
    2023-07-07
  • 基于滚动条位置判断的简单实例

    基于滚动条位置判断的简单实例

    下面小编就为大家分享一篇基于滚动条位置判断的简单实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • JS 箭头函数的this指向详解

    JS 箭头函数的this指向详解

    这篇文章主要给大家介绍了关JS 箭头函数的this指向，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-11-11
  • javaScript 关闭浏览器 (不弹出提示框)

    javaScript 关闭浏览器 (不弹出提示框)

    如果网页不是通过脚本程序打开的（window.open()），调用window.close()脚本关闭窗口前，必须先将window.opener对象置为null，否则浏览器（IE7、IE8）会弹出一个确定关闭的对话框。
    2010-01-01

最新评论