[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 相关文章推荐
JS面向对象、prototype、call()、apply()
May 14 Javascript
JQuery 学习笔记 选择器之三
Jul 23 Javascript
jQuery.extend 函数的详细用法
Jun 27 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
Feb 26 Javascript
JavaScript的事件代理和委托实例分析
Mar 25 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 Javascript
ECMAScript6轮播图实践知识总结
Aug 17 Javascript
mongoose中利用populate处理嵌套的方法
May 26 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
浅谈ng-zorro使用心得
Dec 03 Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 Javascript
js实现滚动条自动滚动
Dec 13 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下将XML转换为数组
2010/01/01 PHP
PHP中绘制图像的一些函数总结
2014/11/19 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
QQ登录简单实现代码
2021/03/09 Javascript
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
javascript实现的左右无缝滚动效果
2016/09/19 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
Node.js进阶之核心模块https入门
2018/05/23 Javascript
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
2019/07/05 Javascript
JS图片预加载三种实现方法解析
2020/05/08 Javascript
Vue watch响应数据实现方法解析
2020/07/10 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
python中map、any、all函数用法分析
2015/04/21 Python
python入门教程之识别验证码
2017/03/04 Python
用python爬取租房网站信息的代码
2018/12/14 Python
Python列表切片操作实例总结
2019/02/19 Python
python os模块简单应用示例
2019/05/23 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
Python tkinter布局与按钮间距设置方式
2020/03/04 Python
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
女性时尚在线:IVRose
2019/02/23 全球购物
办公室主任职责范文
2013/11/08 职场文书
石油大学毕业生自荐信
2014/01/28 职场文书
企业申诉管理制度
2014/01/30 职场文书
大学生村官考核材料
2014/05/23 职场文书
森林病虫害防治方案
2014/06/02 职场文书
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL