[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 this 的一些学习总结
Aug 31 Javascript
javascript实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
含有CKEditor的表单如何提交
Jan 09 Javascript
jquery浏览器滚动加载技术实现方案
Jun 03 Javascript
JavaScript简单表格编辑功能实现方法
Apr 16 Javascript
AngularJS 中文API参考手册
Jul 28 Javascript
微信JS接口大全
Aug 25 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 Javascript
详解js的作用域、预解析机制
Feb 05 Javascript
小程序文字跑马灯效果
Dec 28 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 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 循环删除无限分类子节点的实现代码
2013/06/21 PHP
php 字符串中的\n换行符无效、不能换行的解决方法
2014/04/02 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
PHP测试框架PHPUnit组织测试操作示例
2018/05/28 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
jQuery使用ajaxSubmit()提交表单示例
2014/04/04 Javascript
初识Node.js
2015/03/20 Javascript
javascript实现模拟时钟的方法
2015/05/13 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
微信小程序 本地数据存储实例详解
2017/04/13 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
Vue的自定义组件不能使用click方法的解决
2020/07/28 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
JavaScript ES 模块的使用
2020/11/12 Javascript
[49:21]2018DOTA2亚洲邀请赛3月30日 小组赛B组 Effect VS iG
2018/03/31 DOTA
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
django用户登录和注销的实现方法
2018/07/16 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
Python如何进行时间处理
2020/08/06 Python
python中如何打包用户自定义模块
2020/09/23 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
JD Sports德国官网:英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
德能勤绩廉个人总结
2015/02/14 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书