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 validation插件表单验证的一个例子
Mar 03 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
jquery对象和DOM对象的区别介绍
Aug 09 Javascript
JavaScript将数据转换成整数的方法
Jan 04 Javascript
jQuery统计指定子元素数量的方法
Mar 17 Javascript
浅谈jquery中使用canvas的问题
Oct 10 Javascript
浅谈react 同构之样式直出
Nov 07 Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 Javascript
浅谈vue异步数据影响页面渲染
Oct 29 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 Javascript
JavaScript实现跟随鼠标移动的盒子
Jan 28 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
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
javascript 写的一个简单的timer
2009/07/30 Javascript
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
初识 Vue.js 中的 *.Vue文件
2017/11/22 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
python正则表达式match和search用法实例
2015/03/26 Python
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
利用python获取Ping结果示例代码
2017/07/06 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
python实现统计代码行数的小工具
2019/09/19 Python
Django框架安装方法图文详解
2019/11/04 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
九州传奇上机题
2014/07/10 面试题
物业管理公司实习生自我鉴定
2013/09/19 职场文书
八一建军节部队活动方案
2014/02/04 职场文书
护理中职生求职信范文
2014/02/24 职场文书
签约仪式主持词
2014/03/19 职场文书
会计求职信
2014/05/29 职场文书
雷锋式好少年事迹材料
2014/08/17 职场文书
财务工作个人总结
2015/02/27 职场文书
结婚仪式主持词
2015/06/29 职场文书
sql查询结果列拼接成逗号分隔的字符串方法
2021/05/25 SQL Server