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 相关文章推荐
prototype 中文参数乱码解决方案
Nov 09 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
Sep 13 Javascript
js实现网页自动刷新可制作节日倒计时效果
May 27 Javascript
Javascript学习笔记之数组的构造函数
Nov 23 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
详解AngularJS的通信机制
Jun 18 Javascript
js获取url传值的方法
Dec 18 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
详解基于mpvue的小程序markdown适配解决方案
May 08 Javascript
微信小程序表单弹窗实例
Jul 19 Javascript
ES6基础之默认参数值
Feb 21 Javascript
亲自动手实现vue日历控件
Jun 26 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/01/05 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
php+Ajax处理xml与json格式数据的方法示例
2019/03/04 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
Gambit vs CL BO3 第三场 2.13
2021/03/10 DOTA
JavaScript继承方式实例
2010/10/29 Javascript
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
2017/06/18 Javascript
Bootstrap Table快速完美搭建后台管理系统
2017/09/20 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
[54:10]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
python+django快速实现文件上传
2016/10/24 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
在python里协程使用同步锁Lock的实例
2019/02/19 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
python中字典按键或键值排序的实现代码
2019/08/27 Python
Python pandas自定义函数的使用方法示例
2019/11/20 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
Python使用jupyter notebook查看ipynb文件过程解析
2020/06/02 Python
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
2014年导购员工作总结
2014/11/18 职场文书
详解Flask开发技巧之异常处理
2021/06/15 Python
Vue3实现简易音乐播放器组件
2022/08/14 Vue.js