当前位置:主页 > javascript教程 > javascript prototype原型详解

javascript prototype原型知识点总结

发布:2020-01-04 10:27:33 63


我们帮大家精选了javascript prototype原型相关的编程文章,网友国元明根据主题投稿了本篇教程内容,涉及到javascript、prototype、javascript prototype原型详解相关内容,已被680网友关注,下面的电子资料对本篇知识点有更加详尽的解释。

javascript 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>

效果图:

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

图示如下:

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

上面图片基本说明了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);

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


参考资料

相关文章

  • javascript实现导航栏分页的代码示例

    发布:2021-06-12

    这篇文章主要为大家详细介绍了javascript实现导航栏分页效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • 《PHP、MySQL与JavaScript学习手册》学习笔记与总结

    发布:2018-10-19

    php常用系统函数大全 字符串函数 strlen:获取字符串长度,字节长度 substr_count 某字符串出现的次数 substr:字符串截取,获取字符串(按照字节进行截取) mb_strlen mb_substr strchr:与substr相似,从指定位置截取一直到最后 strrchr(获取文件后缀名):与strchr一样,只是从右边开始查找字符 strtolower:所有的字符都小写(针对英文字母) strtoupper:所有的字符都大写 strrev:字符串反转(


  • 12个提高JavaScript技能的概念(小结)

    发布:2022-08-01

    为网友们分享了关于JavaScript的教程,这篇文章主要介绍了12个提高JavaScript技能的概念(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • 分享JavaScript中数组及对象合并方法示例代码

    发布:2020-03-01

    这篇文章主要介绍了JavaScript中的数组合并方法和对象合并方法,通过代码的形式给大家介绍的非常详细,需要的朋友可以参考下


  • 分享关于JavaScript禁用右键单击优缺点分析

    发布:2020-02-20

    在本篇文章里小编给大家分享了关于JavaScript禁用右键单击优缺点分析,有需要的朋友们学习下。


  • 详解javascript正则表达式

    发布:2020-01-24

    这篇文章主要介绍了javascript正则表达式总结,都是些常用的表达式,这里分享给大家,希望大家能够喜欢


  • jQuery UI库中dialog对话框功能使用全解析

    发布:2022-06-23

    给网友朋友们带来一篇关于jQuery的教程,这篇文章主要介绍了jQuery UI库中dialog对话框功能使用全解析,文中列举了各种常用的dialog属性,整理得很全面,需要的朋友可以参考下


  • JavaScript面向对象程序设计创建对象的方法分析

    发布:2022-06-19

    为网友们分享了关于JavaScript的教程,这篇文章主要介绍了JavaScript面向对象程序设计创建对象的方法,结合实例形式分析了javascript使用object构造函数和对象字面量来创建对象的相关操作技巧,需要的朋友可以参考下


网友讨论