[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 相关文章推荐
Javascript Math对象
Aug 13 Javascript
JS 控件事件小结
Oct 31 Javascript
运算符&&的三个不同层次
Apr 07 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
基于javascript bootstrap实现生日日期联动选择
Apr 07 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
详解Vue路由自动注入实践
Apr 17 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
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
2014/05/22 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
javascript 封装Date日期类实例详解
2017/05/28 Javascript
angular4自定义组件详解
2017/09/28 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
2017/10/09 jQuery
Angularjs按需查询实例代码
2017/10/30 Javascript
JS中promise化微信小程序api
2018/04/12 Javascript
node前端模板引擎Jade之标签的基本写法
2018/05/11 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
2020/05/29 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
python自然语言编码转换模块codecs介绍
2015/04/08 Python
python访问类中docstring注释的实现方法
2015/05/04 Python
python中__call__内置函数用法实例
2015/06/04 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
tensorflow 报错unitialized value的解决方法
2020/02/06 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
Python3批量创建Crowd用户并分配组
2020/05/20 Python
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
生产经理的自我评价分享
2013/11/07 职场文书
后勤人员岗位职责
2013/12/17 职场文书
安全生产标语
2014/06/06 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
工作表扬信
2015/01/17 职场文书
Python实现8种常用抽样方法
2021/06/27 Python
Java实现给Word文件添加文字水印
2022/02/15 Java/Android