[js高手之路]图解javascript的原型(prototype)对象,原型链实例


Posted in Javascript onAugust 28, 2017

我们通过原型方式,解决了多个实例的方法共享问题,接下来,我们就来搞清楚原型(prototype),原型链的来龙去脉。

function CreateObj(uName) {
   this.userName = uName;
  }
  CreateObj.prototype.showUserName = function(){
   return this.userName;
  }
  var obj1 = new CreateObj('ghostwu');
  var obj2 = new CreateObj('卫庄');

[js高手之路]图解javascript的原型(prototype)对象,原型链实例

1,每个函数都有一个原型属性(prototype) , 这个属性是一个指针,指向构造函数的原型对象( CreateObj.prototype), 如上图中的第1根绿色的线

2,在默认情况下,所有原型对象都会自动获得一个constructor属性,该属性的作用上文已经解释过,该属性包含一个指向prototype属性所在的函数,如上图的第2根绿色的线

3,所有的实例( 通过构造函数new出来的, 原型对象[ 如CreateObj.prototype, 上图我还没有画出来]等 )都包含一个隐式原型(__proto__),该指针指向实例的构造函数的原型对象,

如上图中的第3根线和第4根线. obj1的构造函数是CreateObj, CreateObj的原型对象是CreateObj.prototype, obj2同理,所以:

obj1.__proto__ === CreateObj.prototype //true

obj2.__proto__ === CreateObj.prototype //true

4,写在构造函数中, 为this赋值的属性和方法, 在画图的过程中,把他们画在对象上面,如userName这个是给对象赋值的属性,所以在obj1和obj2这两个对象上都会存在一个属性userName

5,写在原型对象上的方法或者属性,应该把他们画在原型对象上,如

CreateObj.prototype.showUserName = function(){
return this.userName;
}

showUserName这个方法就要画在图中CreateObj.prototype上面

6,当一个对象访问属性和方法的时候,他的访问规则叫(就近原则), 规则如下:

当实例上面,存在属性或者方法时,直接用实例上面的,

如果实例上面不存在属性和方法,就会沿着实例的__proto__指针指向的原型对象继续往上查找,如果找不到,值就是undefined.

console.log( obj1.showUserName() ); //ghostwu
console.log( obj2.showUserName() ); //卫庄

在obj1,obj2上面是不存在showUserName这个方法的,所以会顺着__proto__查找到CreateObj.prototype原型对象上的showUserName方法

如果,把CreateObj.prototype原型对象上的showUserName注释掉,那么obj1.showUserName和obj2.showUserName就会报错

// CreateObj.prototype.showUserName = function(){
// return this.userName;
// }
function CreateObj(uName) {
   this.userName = uName;
   this.showUserName = function(){
    return '100';
   }
  }
  CreateObj.prototype.showUserName = function(){
   return this.userName;
  }

  var obj1 = new CreateObj('ghostwu');
  var obj2 = new CreateObj('卫庄');

  console.log( obj1.showUserName() ); //100
  console.log( obj2.showUserName() ); //100

如果在构造函数中为this添加一个showUserName方法, 那么obj1和obj2就会直接调用this上面的,因为这两个方法会被画在图中的实例上,所以:

console.log( obj1.showUserName === obj2.showUserName ); //false

现在,你应该能明白,把属性和方法写在构造函数的原型对象(prototype)上之后,能实现多个实例属性和方法的共享的原理了吧

什么是原型链?

在前面,我有说过,所有的实例(包括原型对象)都有一个隐式原型__proto__,那么CreateObj.prototype这个原型对象,他的__proto__指向谁呢?

function CreateObj(uName) {
   this.userName = uName;
   this.showUserName = function () {
    return '100';
   }
  }
  CreateObj.prototype.showUserName = function () {
   return this.userName;
  }

  console.log( CreateObj.prototype.__proto__ ); //指向Object.prototype
  console.log( CreateObj.prototype.__proto__ === Object.prototype ); //true

[js高手之路]图解javascript的原型(prototype)对象,原型链实例

CreateObj.prototype.__proto__指向的是Object.prototype, 通过 全等运算符 (===) 测试之后为true

Object.prototype.__proto__ 指向的是NULL

这就是原型链,通过隐式原型把一些构造函数层层的串起来,通过上面这个图,就知道,为什么自定义的对象能调用toString, valueOf,等方法了吧?

因为所有的对象都是继承自Object.

以上这篇[js高手之路]图解javascript的原型(prototype)对象,原型链实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 简短右键菜单 多浏览器兼容
Jan 01 Javascript
Extjs入门之动态加载树代码
Apr 09 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
Jan 03 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
Dec 26 Javascript
jQuery中 bind的用法简单介绍
Feb 13 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
如何解决vue在ios微信"复制链接"功能问题
Mar 26 Javascript
Node在Controller层进行数据校验的过程详解
Aug 28 Javascript
js制作简单的音乐播放器的示例代码
Aug 28 #Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
Aug 28 #Javascript
jQuery菜单实例(全选,反选,取消)
Aug 28 #jQuery
[js高手之路]原型式继承与寄生式继承详解
Aug 28 #Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 #Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 #Javascript
js排序与重组的实例讲解
Aug 28 #Javascript
You might like
用php+javascript实现二级级联菜单的制作
2008/05/06 PHP
php中对2个数组相加的函数
2011/06/24 PHP
PHP 数据结构队列(SplQueue)和优先队列(SplPriorityQueue)简单使用实例
2015/05/12 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
php变量与JS变量实现不通过跳转直接交互的方法
2017/08/25 PHP
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
jQuery 技巧小结
2010/04/02 Javascript
JSON格式的键盘编码对照表
2015/01/29 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
jQuery UI Grid 模态框中的表格实例代码
2017/04/01 jQuery
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
原生js FileReader对象实现图片上传本地预览效果
2020/03/27 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
js实现打字小游戏
2019/12/17 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
Python之多进程与多线程的使用
2021/02/23 Python
CSS3实现复选框动画特效示例代码
2016/09/27 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
感恩母亲节演讲稿
2014/05/07 职场文书
白岩松演讲
2014/05/21 职场文书
基层党员对照检查材料
2014/08/25 职场文书
动视暴雪取消疫苗禁令 让所有员工返回线下工作
2022/04/03 其他游戏