小笔记：JS原型和原型链

CastlePeaK 发布于2019-08-26 13:51 / 878人阅读

摘要：所以为了方便查看一个对象的原型，和中提供了这个非标准不是所有浏览器都支持的访问器引入了标准对象原型访问器。在的原型对象中，还包含一个属性，这个属性对应创建所有指向该原型的实例的构造函数。

JS原型？

有句简洁直观的描述："原型是Javascript中的继承的基础，JavaScript的继承就是基于原型的继承"。

在JavaScript中，原型也是一个对象，通过原型可以实现对象的属性继承，JavaScript的对象中都包含了一个"[[Prototype]]"内部属性，这个属性所对应的就是该对象的原型。

"[[Prototype]]"作为对象的内部属性，是不能被直接访问的。所以为了方便查看一个对象的原型，Firefox和Chrome中提供了__proto__这个非标准（不是所有浏览器都支持）的访问器（ECMA引入了标准对象原型访问器"Object.getPrototype(object)"）。在JavaScript的原型对象中，还包含一个"constructor"属性，这个属性对应创建所有指向该原型的实例的构造函数。

提到原型，我们必须要了解下Object和Function：

Object和Function都是JS的自带函数，Object继承自己，Funtion继承自己，Object和Function互相是继承对方，也就是说Object和Function都既是函数也是对象。

//instanceof 就是判断一个实例是否属于某种类型
console.log(Function instanceof Object); // true
console.log(Object instanceof Function); // true

前面提到为了方便查看一个对象的原型，引入"__proto__",那么Function和Object对应的原型是什么？

console.log(Function.__proto__); // ƒ () { [native code] }
console.log(Object.__proto__);  // ƒ () { [native code] }
console.log(Function.__proto__==Function.prototype); //true
console.log(Object.__proto__==Function.prototype); //true

所以,Object 是 Function的实例，而Function是它自己的实例。

说到Function和Object的相互继承和对应原型，可能觉得有点头大，那我们先放一下，让我们先了解下js对象的一些小知识

普通对象和函数对象

万物皆对象,js中对象其实分为函数对象和普通对象。
函数对象可以创建普通对象，普通对象没法创建函数对象，所以普通对象权利最低。

//普通对象
let str=new String();
let num=new Number();
let obj=new Object();
//....

凡是通过new Function创建的对象都是函数对象，其他都是普通对象（通常通过Object创建），可以通过typeof来判断。

function f1(){}; // ==  var f1 = new Function();

function f2(a,b){
  alert(a+b);
}
//等价于
var f2 = new Function(a,b,"alert(a+b)");

说那么多，其实记住下面的内容就好了：

1.每一个函数对象都有一个prototype属性，但是普通对象是没有的；prototype下面又有个construetor，指向这个函数。

2.每个对象都有一个名为_proto_的内部属性，指向它所对应的构造函数的原型对象，原型链基于_proto_;

让我们建一个普通函数，可以看到：

var obj = {};
  console.log(obj.prototype); //undefined
  console.log(obj instanceof Object); //true
  console.log(obj.__proto__ === Object.prototype) //true
  console.log(Object === Object.prototype.constructor) //true
  console.log(Object.prototype.constructor) //function Object()
　console.log(Object.prototype.__proto__); //null

obj的确没有prototype属性

obj是Object的实例

obj的__proto__指向Object的prototype

Object.prototype.constructor指向Object本身

再建一个函数对象：

function Fun(){};
var f1 = new Fun();
console.log(f1.prototype); //undefined
console.log(f1 instanceof Fun); //true
console.log(f1.__proto__ === Fun.prototype); //true
console.log(Fun=== Fun.prototype.constructor) ;//true
console.log(Fun.prototype.__proto__ === Object.prototype) ;//true
console.log(Object.prototype.__proto__); //null

Fun是函数对象，f1还是普通对象

f1是Fun的实例

Fun的原型prototype的__proto__指向Object的原型prototype,而Object的原型prototyped的__proto__指向null;

原型链

ECMscript中描述了原型链的概念，并将原型链作为js实现继承的主要方法。
基本思路：利用原型，让一个引用类继承另一个引用类的属性和方法。
构造函数、原型和实例的关系：
    每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。

其实，avascript中，每个对象都会在内部生成一个proto 属性，当我们访问一个对象属性时，如果这个对象不存在就回去proto 指向的对象里面找，一层一层找下去，这就是javascript原型链的概念。

f1.__proto__ ==> Fun.prototype ==> Fun.prototype.__proto__ ==> Object.prototype ==> Object.prototype.__proto__ ==> null

JS世界中所有的东西都是对象,所有的东西都由Object衍生而来, 所以所有东西原型链的终点指向null

GPU云服务器云服务器 js原型链的继承原型原型链原型链原型链继承

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109684.html

[学习笔记] 小角度看JS原型链

摘要：虽然在脚本中没有标准的方式访问，但在每个对象上都支持一个属性，用于访问其构造函数的原型对象。说的是构造函数和原型对象之间的关系，说的是实例对象和原型对象之间的关系。前言在 segmentfault 上看到这样一道题目： var F = function(){}; Object.prototype.a = function(){}; Function.prototype.b = fu...

Cciradih 2019-08-21 10:39 评论0 收藏0
《javascript高级程序设计》笔记：原型图解

摘要：不理解没关系，下面会结合图例分析上一篇高级程序设计笔记创建对象下一篇高级程序设计笔记继承参考之原型链的解读三张图搞懂的原型对象与原型链继承与原型链文章直接从原型图解开始的，如果对一些概念不太清除，可以结合后面几节查看 1. 图解原型链 1.1 铁三角关系（重点） function Person() {}; var p = new Person(); showImg(https://s...

vspiders 2019-08-21 17:29 评论0 收藏0
《你不知道的javascript》笔记_对象&原型

摘要：上一篇你不知道的笔记写在前面这是年第一篇博客，回顾去年年初列的学习清单，发现仅有部分完成了。当然，这并不影响年是向上的一年在新的城市稳定连续坚持健身三个月早睡早起游戏时间大大缩减，学会生活。上一篇：《你不知道的javascript》笔记_this 写在前面这是2019年第一篇博客，回顾去年年初列的学习清单，发现仅有部分完成了。当然，这并不影响2018年是向上的一年：在新的城市稳定、...

seasonley 2019-08-23 14:32 评论0 收藏0
原型与原型链学习笔记

摘要：原型相同对象的共有属性也称作原型原型链中所有的对象都是由它的原型对象继承而来。说的直白点就是，所有原型链的属性，最终都指向的是对象的而对象的指向的是。原型：相同对象的共有属性也称作原型原型链：中所有的对象都是由它的原型对象继承而来。而原型对象自身也是一个对象，它也有自己的原型对象，这样层层上溯，就形成了一个类似链表的结构，这就是原型链showImg(https://segm...

jiekechoo 2019-08-23 18:03 评论0 收藏0
JavaScript学习第十天笔记（继承）

摘要：继承原型链如果构造函数或对象的原型指向构造函数或对象，的原型再指向构造函数或对象，以此类推，最终的构造函数或对象的原型指向的原型。继承原型链如果构造函数或对象A的原型指向构造函数或对象B，B的原型再指向构造函数或对象C，以此类推，最终的构造函数或对象的原型指向Object的原型。由此形成了一条链状结构，被称之为原型链。按照上述的描述，在B中定义的属性或方法，可以在A中使用并不需要...

baiy 2019-08-26 12:17 评论0 收藏0