脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 基础知识 → js prototype原型

javascript prototype原型详解(比较基础)

 更新时间：2016年12月26日 20:35:24   作者：antzone  
prototype原型是javascript中特别重要的概念，属于必须要掌握，如果没有良好的掌握的话，进一步用好或者学好js基本是不可能的实现的事情，并且此概念稍有难度，可能对于初次接触的朋友来说有点困难，下面就通过代码实例简单介绍一下prototype原型的用法

javascript的prototype原型简单介绍:
prototype原型是javascript中特别重要的概念，属于必须要掌握，如果没有良好的掌握的话，进一步用好或者学好js基本是不可能的实现的事情，并且此概念稍有难度，可能对于初次接触的朋友来说有点困难，下面就通过代码实例简单介绍一下prototype原型的用法。

一.基本概念:

每一个函数都具有一个prototype属性。
此属性是一个指针，能够指向一个对象，而此对象将会被由构造函数创建的对象实例所共享，也就是会继承此对象。
总结:prototype所指向的对象是被构造函数所创建的对象实例所共同共享的。
创建的对象实例有一个内部属性[[Prototype]]，它是一个指针，指向构造函数原型（prototype）指向的对象。
先看一段代码:

<script>
function antzone(name,age){
 this.webname=name;
 this.age=age;
}
antzone.prototype.getName=function(){
 return this.webname;
}
var oantzone=new antzone("脚本之家",10);
console.log(oantzone.getName());
</script>

效果图：

图示如下:

上面图片基本说明了prototype的作用。
二.代码实例:
实例一:

function antzone(name,age){
 this.webname=name;
 this.age=age;
}
var obj={
 address:"江苏省徐州"
}
var oantzone=new antzone("脚本之家",10);
antzone.prototype=obj;
console.log(oantzone.address);

看以上代码，很多朋友可能以为输出值是"江苏省徐州"，但是实际输出内容是undefined，这是因为在使用构造函数创建对象oantzone的时候，oantzone对象内部属性[[Prototype]]将会指向antzone()构造函数的原型prototype所指向的对象，而后来antzone.prototype=obj是重置构造函数的原型，而oantzone的内置属性[[Prototype]]指向依然是原来的对象，自然oantzone.address是undefined。
实例二:

<script>
function antzone(name,age){
 this.webname=name;
 this.age=age;
}
var obj={
 address:"江苏省徐州"
}
antzone.prototype=obj;
var oantzone=new antzone("脚本之家",10);
console.log(oantzone.webname+oantzone.address);
</script>

此代码和上一段代码的唯一不同，就是第八行和第九行进行了一下交换，这样就可以输出"江苏省徐州"，这个就不难理解了，因为对象实例是在重置原型以后创建的。
实例三:

function antzone(name,age){
 this.webname=name;
 this.age=age;
}
var obj={
 address:"江苏省徐州"
}
antzone.prototype.add=obj;
var oantzone=new antzone("脚本之家",10);
console.log(oantzone.add.address);

以上代码只是修改对象原型，而不是重置对象原型。

您可能感兴趣的文章:

相关文章

  • 屏蔽alt+f4代码，一个变通的方法

    屏蔽alt+f4代码，一个变通的方法

    屏蔽alt+f4代码，一个变通的方法...
    2006-10-10
  • JS中构造函数的基本特性与优缺点

    JS中构造函数的基本特性与优缺点

    这篇文章介绍了JS中构造函数的基本特性与优缺点，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-06-06
  • JavaSacript中charCodeAt()方法的使用详解

    JavaSacript中charCodeAt()方法的使用详解

    这篇文章主要介绍了JavaSacript中charCodeAt()方法的使用详解,是JS入门学习中的基本知识,需要的朋友可以参考下
    2015-06-06
  • 正则表达式(语法篇推荐)

    正则表达式(语法篇推荐)

    下面小编就为大家带来一篇正则表达式(语法篇推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • js基石系列学习之错误类型

    js基石系列学习之错误类型

    这篇文章主要为大家介绍了js基石系列学习之错误类型示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-05-05
  • JavaScript箭头(arrow)函数详解

    JavaScript箭头(arrow)函数详解

    本文讲的是从初学者的角度详解Javascript ES6中的箭头函数(Arrow Functions)的基础知识， ES6可以使用“箭头”定义函数，注意是函数，不要使用这种方式定义类（构造器）
    2017-06-06
  • JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结

    JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结

    这篇文章主要介绍了JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发中基础的知识点，并通过举例详细解释了JavaScript定义的数据类型、无第三变量交换值、/和%运算符、Memoization技术、闭包等知识，需要的朋友可以参考下
    2017-08-08
  • JS中处理时间之setUTCMinutes()方法的使用

    JS中处理时间之setUTCMinutes()方法的使用

    这篇文章主要介绍了JavaScript中处理时间之setUTCMinutes()方法的使用,是JavaScript入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • JavaScript CSS修改学习第一章 查找位置

    JavaScript CSS修改学习第一章 查找位置

    在这一章我会给出查找页面上的元素位置的代码。他能帮助你找到真正的位置，假如你改变了窗口的尺寸，然后再次运行代码，也会告诉你新的位置。
    2010-02-02
  • JS 全屏和退出全屏详解及实例代码

    JS 全屏和退出全屏详解及实例代码

    退出全屏效果与全屏效果我们可能在看视频网站时看到多,这里来为各位介绍利用js全屏和退出全屏代码范例吧，,需要的朋友可以参考下
    2016-11-11

最新评论