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 取值、赋值的基本方法整理
Mar 31 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
Bootstrap导航条学习使用(二)
Feb 08 Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
使用Vue开发一个实时性时间转换指令
Jan 17 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
Mar 14 Javascript
openlayers 3实现车辆轨迹回放
Sep 24 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持久连接mysql_pconnect()函数使用介绍
2012/02/05 PHP
用PHP读取超大文件的实例代码
2012/04/01 PHP
php计算到指定日期还有多少天的方法
2015/04/14 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
php读取出一个文件夹及其子文件夹下所有文件的方法示例
2017/06/15 PHP
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
JS实现探测网站链接的方法【测试可用】
2016/11/08 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
Javasript设计模式之链式调用详解
2018/04/26 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
浅谈vue的第一个commit分析
2020/06/08 Javascript
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
python读取文件名称生成list的方法
2018/04/27 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
wxpython绘制音频效果
2019/11/18 Python
python随机生成库faker库api实例详解
2019/11/28 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
保安岗位职责
2014/02/21 职场文书
项目建议书怎么写
2014/05/15 职场文书
法定授权委托证明书
2014/09/27 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
python如何将mat文件转为png
2022/07/15 Python
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript