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 相关文章推荐
javascript 一个自定义长度的文本自动换行的函数
Aug 19 Javascript
基于jquery.Jcrop的头像编辑器
Mar 01 Javascript
js+html5绘制图片到canvas的方法
Jun 05 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
基于canvas实现的钟摆效果完整实例
Jan 26 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 Javascript
解析vue、angular深度作用选择器
Sep 11 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
Apr 08 Javascript
JavaScript enum枚举类型定义及使用方法
May 15 Javascript
原生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
php下保存远程图片到本地的办法
2010/08/08 PHP
几款免费开源的不用数据库的php的cms
2010/12/19 PHP
php数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
2011/10/31 PHP
PHP求小于1000的所有水仙花数的代码
2012/01/10 PHP
CodeIgniter基本配置详细介绍
2013/11/12 PHP
php获取本机真实IP地址实例代码
2016/03/31 PHP
PHP加密3DES报错 Call to undefined function: mcrypt_module_open() 如何解决
2016/04/17 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
php操作mongodb封装类与用法实例
2018/09/01 PHP
js 如何实现对数据库的增删改查
2012/11/23 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
jQuery 选择同时包含两个class的元素的实现方法
2016/06/01 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
JavaScript实现三级级联特效
2017/11/05 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
Node.js log4js日志管理详解
2018/07/31 Javascript
简述vue状态管理模式之vuex
2018/08/29 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
jQuery实现手风琴效果(蒙版)
2020/01/11 jQuery
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
python调用windows api锁定计算机示例
2014/04/17 Python
python实现C4.5决策树算法
2018/08/29 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
python实现桌面气泡提示功能
2019/07/29 Python
行政助理的职责
2013/11/14 职场文书
中学实习教师自我鉴定
2013/12/12 职场文书
致标枪运动员加油稿
2014/02/15 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
干货:如何写好工作计划!
2019/05/17 职场文书
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS