js构造函数constructor和原型prototype原理与用法实例分析


Posted in Javascript onMarch 02, 2020

本文实例讲述了js构造函数constructor和原型prototype原理与用法。分享给大家供大家参考,具体如下:

所有引用类型(函数,数组,对象)都拥有__proto__属性(隐式原型)

所有函数拥有prototype属性(显式原型)(仅限函数)

原型对象:拥有prototype属性的对象,在定义函数时就被创建

__proto__, prototype和constructor

下面这三个属性的定义非常重要,始终贯穿在原型中。

  • prototype:此属性只有构造函数才有,它指向的是当前构造函数的原型对象
  • __proto__:此属性是任何对象在创建时都会有的一个属性,它指向了产生当前对象的构造函数的原型对象,由于并非标准规定属性,不要随便去更改这个属性的值,以免破坏原型链,但是可以借助这个属性来学习,所谓的原型链就是由__proto__连接而成的链。
  • constructor:此属性只有原型对象才有,它默认指回prototype属性所在的构造函数

构造函数的特点:

 a:构造函数的首字母必须大写,用来区分于普通函数

 b:内部使用的this对象,来指向即将要生成的实例对象

 c:使用New来生成实例对象

function定义的对象有一个prototype属性,使用new生成的对象就没有这个prototype属性(Person是一个对象)

Person是一个对象,它有一个prototype的原型属性(因为所有的对象都一prototype原型!)prototype属性有自己的prototype对象,而pototype对象肯定也有自己的construct(构造)属性,construct属性有自己的constructor(构造函数)对象,神奇的事情要发生了,这最后一个constructor对象就是我们构造出来的function函数本身

function Person(name){
 this.name=name;
 this.showMe=function(){
 alert(this.name)
 }
}
var one=new Person('js-yeluosen');
one.showMe();
console.log(one.prototype)//undefined
console.log(typeof Person.prototype)//Obiect
console.log(Person.prototype)
console.log(Person.prototype.constructor)

js构造函数constructor和原型prototype原理与用法实例分析

当调用某种方法或查找某种属性时,首先会在自身调用和查找,如果自身并没有该属性或方法,则会去它的__proto__属性中调用查找,也就是它构造函数的prototype中调用查找

当函数对象本身的属性或方法与原型的属性或方法同名的时候:

    1、默认调用的是函数对象本身的属性或方法.
    2、通过原型增加的属性或方法的确是存在的.
    3、函数对象本身的属性或方法的优先级要高于原型的属性或方法.

function Hero(){
 this.name='jiangyx'
}
Hero.prototype.name="yeluosen"
var mm=new Hero()
// 当调用某种方法或查找某种属性时,首先会在自身调用和查找,如果自身并没有该属性或方法,则会去它的__proto__属性中调用查找,也就是它构造函数的prototype中调用查找
alert(mm.name)//jiangyx
alert(mm.__proto__.name)//jiangyx
delete mm.name
alert(mm.name)//yeluosen
//创建构造函数
function Word(words){
  this.words = words;
}
Word.prototype = {
  alert(){
    alert(this.words);
  }
}
//创建实例
var w = new Word("hello world");
w.print = function(){
  console.log(this.words);
}
w.print(); //hello world
// 当调用某种方法或查找某种属性时,首先会在自身调用和查找,如果自身并没有该属性或方法,则会去它的__proto__属性中调用查找,也就是它构造函数的prototype中调用查找
// w本身没有alert()方法,所以会去Word()的显式原型中调用alert(),即实例继承构造函数的方法。     
w.alert(); //hello world
// 实例w的隐式原型指向它构造函数的显式原型,指向的意思是恒等于
// w.__proto__ === Word.prototype

print()方法是w实例本身具有的方法,所以w.print()打印hello world;alert()不属于w实例的方法,属于构造函数的方法,w.alert()也会打印hello world,因为实例继承构造函数的方法。

实例w的隐式原型指向它构造函数的显式原型,指向的意思是恒等于

w.__proto__ === Word.prototype

总结

1、prototype只有构造函数才有,指向构造函数的原型。
2、__proto__任何对象都有,指向产生当前对象的构造函数的原型。
3、constructor只有原型对象才有,默认指回prototype属性所在的构造函数,使用原型链继承之后,要给新的原型对象添加constructor属性并指向构造函数。
4、任何对象都有产生自己的构造函数,包括构造函数自己。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery自动将form表单封装成json的具体实现
Mar 17 Javascript
javascript正则表达式使用replace()替换手机号的方法
Jan 19 Javascript
jQuery实现给页面换肤的方法
May 30 Javascript
分享纯手写漂亮的表单验证
Nov 19 Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 Javascript
完全深入学习Bootstrap表单
Nov 28 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
jquery animate动画持续运动的实例
Nov 29 jQuery
vue如何引入sass全局变量
Jun 28 Javascript
基于JavaScript 实现拖放功能
Sep 12 Javascript
Vue全局事件总线你了解吗
Feb 24 Vue.js
原生js实现日历效果
Mar 02 #Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
Mar 02 #Javascript
详解Vue中的Props与Data细微差别
Mar 02 #Javascript
微信小程序实现音频文件播放进度的实例代码
Mar 02 #Javascript
不刷新网页就能链接新的js文件方法总结
Mar 01 #Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 #Javascript
vue学习笔记之Vue中css动画原理简单示例
Feb 29 #Javascript
You might like
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
用PHP将数据导入到Foxmail
2006/10/09 PHP
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
PHP数据库处理封装类实例
2016/12/24 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
jQuery实现进度条效果代码
2015/12/17 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
基于javascript 显式转换与隐式转换(详解)
2017/12/15 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
layui--select使用以及下拉框实现键盘选择的例子
2019/09/24 Javascript
将Python的Django框架与认证系统整合的方法
2015/07/24 Python
浅谈Python数据类型之间的转换
2016/06/08 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
python实现诗歌游戏(类继承)
2019/02/26 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
Python3使用PySynth制作音乐的方法
2019/09/09 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
2016/12/16 HTML / CSS
在校硕士自我鉴定
2014/01/23 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技