JavaScript中的原型prototype完全解析


Posted in Javascript onMay 10, 2016

   要理解JS中的prototype, 首先必须弄清楚以下几个概念
   1. JS中所有的东西都是对象

   2. JS中所有的东西都由Object衍生而来, 即所有东西原型链的终点指向Object.prototype
 

// ["constructor", "toString", "toLocaleString", "valueOf", "hasOwnProperty", "isPrototypeOf", 
   // "propertyIsEnumerable", "__defineGetter__", "__lookupGetter__", "__defineSetter__",
   // "__lookupSetter__"]
   console.log(Object.getOwnPropertyNames(Object.prototype));

   3. JS中构造函数和实例(对象)之间的微妙关系
   构造函数通过定义prototype来约定其实例的规格, 再通过 new 来构造出实例, 他们的作用就是生产对象.
   而构造函数(方法)本身又是方法(Function)的实例, 因此也可以查到它的__proto__(原型链)

   Object       / function F() {} 这样子的就是构造函数啦, 一个是JS原生API提供的, 一个是自定义的
   new Object() / new F()           这样子的就是实例啦
   实例就"只能"查看__proto__来得知自己是基于什么prototype被制造出来的,
   而"不能"再重新定义实例的prototype妄想创造出实例的实例了.

   实践出真知, 只有自己动手观察/思考才能真正领悟:

// 先来看看构造函数到底是什么
  // function Empty() {}  function Empty() {}
  console.log(Function.prototype, Function.__proto__);
  // Object {}          function Empty() {}
  console.log(Object.prototype, Object.__proto__);
  function F() {}
  // F {}              function Empty() {}
  console.log(F.prototype, F.__proto__);

   你可能已经晕了, 我们来分解一下。

prototype
   prototype输出的格式为: 构造函数名 原型
   首先看下Object.prototype输出了什么?
   Object {} -> 前面的Object为构造函数的名称, 后面的那个表示原型, 这里是一个{}, 即一个Object对象的实例(空对象)
   那么 F {} 我们就明白是什么意思了, F 就是构造函数的名称, 原型也是一个空对象

// 再来看看由构造函数构造出来的实例
  var o = new Object(); // var o = {};
  // undefined       Object {}
  console.log(o.prototype, o.__proto__);
  function F() {}
  var i = new F();
  // undefined       F {}
  console.log(i.prototype, i.__proto__);

   我们再深入一点, 定义下 F 的原型看看到底会发生些什么?

function F() {}
  F.prototype.a = function() {};
  var i = new F();
  // undefined       F {a: function}
  console.log(i.prototype, i.__proto__);

   这样我们就清楚的看到 i 是由 F 构造出来的, 原型是 {a: function}, 就是原本的空对象原型新增了一个 a 方法

   我们再换一种情况, 完全覆盖 F 的原型会怎么样?
   

function F() {}
  F.prototype = {
    a: function() {}
  };
  var i = new F();
  // undefined       Object {a: function}
  console.log(i.prototype, i.__proto__);

   咦~ 为什么这里表明 i 是由 Object 构造出来的? 不对吧!
   因为我们完全将 F 的prototype覆盖, 其实也就是将原型指定为对象{a: function}, 但这会造成原本的constructor信息丢失, 变成了对象{a: function}指定的constructor.
   那么对象{a: function}的constructor是什么呢?
   因为对象{a: function}其实就相对于

var o = {a: function() {}} // new了一个Object

   那么o的constructor当然是 Object 啦

   我们来纠正下这个错误

function F() {}
  F.prototype = {
    a: function() {}
  }
  // 重新指定正确的构造函数
  F.prototype.constructor = F;
  var i = new F();
  // undefined       F {a: function, constructor: function}
  console.log(i.prototype, i.__proto__);

   现在又能得到正确的原型信息了~

原型链

   然后来看看什么原型链又是个什么东西?
   简单的来讲和OOP中的继承关系(链)是一样的, 一层一层往上找, 直至最终的 Object.prototype

JavaScript中的原型prototype完全解析

      最最关键的是要弄清楚JS中哪些东西是(实例)对象, 这个简单了, JS中所有东西都是对象!
   再要弄清楚就是任何一个对象都是有一个原型的!

   那么我们来证明一下:
  

Object // 这是一个函数, 函数是 Function 的实例对象, 那么就是由 Function 构造出来的
  Object.__proto__ == Function.prototype // 那么Object的原型, true
  // 这个是一个普通对象了, 因此属于 Object 的实例
  Function.prototype.__proto__ == Object.prototype // true
  // 这已经是原型链的最顶层了, 因此最终的指向 null
  Object.prototype.__proto__ == null // true

  Function // 这也是一个函数, 没错吧!
  Function.__proto__ == Function.prototype // true
  
  function A() {} // 这是一个自定义的函数, 终归还是一个函数, 没错吧! 
  A.__proto__ == Function.prototype // 任何函数都是 Function 的实例, 因此A的原型是?
  var a = new A()
  a.__proto__ == A.prototype // 实例a是由A构造函数构造出来的, 因此a的原型是由A的prototype属性定义的
  A.prototype.__proto__ == Object.prototype // 普通对象都是 Object 的示例

Prototype和__proto__
每一个对象都包含一个__proto__,指向这个的对象的“原型”。
类似的事情是,每一个函数都包含一个prototype,这个prototype对象干什么的了?

咱们看看如下代码,用构造函数来创建一个对象(上面是用字面量的形式创建对象)。

function Foo(){};
var foo = new Foo();
console.log(foo.__proto__);

试想想,这个foo对象的__proto__会指向什么?

JavaScript中的原型prototype完全解析

一个包含constructor属性的对象?看不太懂没关系,把函数Foo的prototype属性打印出来,对比一下就知道了。

function Foo(){};
var foo = new Foo();
console.log(foo.__proto__);
console.log(Foo.prototype);
console.log(foo.__proto__ === Foo.prototype);

JavaScript中的原型prototype完全解析

原来,new出来的对象foo的__proto__就只指向函数Foo的prototype。

foo.__proto__ --> Foo.prototype

JS这么设计有何意义了?回忆下上面说的,在JS的世界中,对象不是根据类(模具)创建出来的,而是从原型(另一个对象)衍生出来的。

当我们执行new操作创建一个新的对象时,先不深入new操作的具体实现,但有一点我们是肯定的——就是为新对象的__proto__指向一个原型对象。

就刚才这段代码

function Foo(){};
var foo = new Foo();

foo.__proto__到底要指向谁了?你怎么不能指向Foo这个函数本身吧,虽然函数也是对象,这个有机会会详细讲。但如何foo.__proto__指向Foo固然不合适,因为Foo是一个函数,有很多逻辑代码,foo作为一个对象,继承逻辑处理没有任何意义,它要继承的是“原型对象”的属性。

所以,每个函数会自动生成一个prototype对象,由这个函数new出来的对象的__proto__就指向这个函数的prototype。

foo.__proto__ --> Foo.prototype

总结
说了这么多,感觉还是没完全说清楚,不如上一张图。我曾经参考过其他网友的图,但总觉得哪里没说清楚,所以我自己画了一张图,如果觉得我的不错,请点个赞!(老子可是费了牛劲才画出来)。

JavaScript中的原型prototype完全解析

咱们就着这张图,记住如下几个事实:

1. 每个对象中都有一个_proto_属性。

JS世界中没有类(模具)的概念,对象是从另一个对象(原型)衍生出来的,所以每个对象中会有一个_proto_属性指向它的原型对象。(参考左上角的那个用字面量形式定义的对象obj,它在内存中开辟了一个空间存放对象自身的属性,同时生成一个_proto_指向它的原型——顶层原型对象。)

2. 每个函数都有一个prototype属性。

“构造函数”为何叫构造函数,因为它要构造对象。那么根据上面第一条事实,构造出来的新对象的_proto_属性指向谁了?总不能指向构造函数自身,虽然它也是个对象,但你不希望新对象继承函数的属性与方法吧。所以,在每个构造函数都会有一个prototype属性,指向一个对象作为这个构造函数构造出来的新对象的原型。

3. 函数也是对象。

每个函数都有一些通用的属性和方法,比如apply()/call()等。但这些通用的方法是如何继承的呢?函数又是怎么创建出来的呢?试想想,一切皆对象,包括函数也是对象,而且是通过构造函数构造出来的对象。那么根据上面第二条事实,每个函数也会有_proto_指向它的构造函数的prototype。而这个构造函数的函数就是Function,JS中的所有函数都是由Function构造出来的。函数的通用属性与方法就存放在Function.prototype这个原型对象上。

Javascript 相关文章推荐
JavaScript转换农历类实现及调用方法
Jan 27 Javascript
谈谈JavaScript中的函数与闭包
Apr 14 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
javascript数字时钟示例分享
Apr 23 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 Javascript
AngularJS基础 ng-src 指令简单示例
Aug 03 Javascript
利用js编写响应式侧边栏
Sep 17 Javascript
浅谈JavaScript的计时器对象
Dec 26 Javascript
jQuery正则验证注册页面经典实例
Jun 10 jQuery
jQuery ajax调用webservice注意事项
Oct 08 jQuery
浅谈ng-zorro使用心得
Dec 03 Javascript
简单解析JavaScript中的__proto__属性
May 10 #Javascript
Web Uploader文件上传插件使用详解
May 10 #Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
May 10 #Javascript
JS上传组件FileUpload自定义模板的使用方法
May 10 #Javascript
使用jQuery处理AJAX请求的基础学习教程
May 10 #Javascript
javascript关于继承解析
May 10 #Javascript
JavaScript继承学习笔记【新手必看】
May 10 #Javascript
You might like
PHP 文件系统详解
2012/09/13 PHP
php通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
基于JavaScript短信验证码如何实现
2016/01/24 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
2017/09/03 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
2017/12/06 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
JS文件中加载jquery.js的实例代码
2018/05/05 jQuery
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
vue使用swiper实现中间大两边小的轮播图效果
2019/11/24 Javascript
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
求职信模版
2013/11/30 职场文书
七年级地理教学反思
2014/01/26 职场文书
七年级政治教学反思
2014/02/03 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
实习公司领导推荐函
2014/05/21 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
医院党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
公司更名通知函
2015/04/24 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL