原型和原型链

一、prototype

在JavaScript中，prototype对象是实现面向对象的一个重要机制。
每个函数就是一个对象（Function），函数对象都有一个子对象prototype对象，类是以函数的形式来定义的。prototype表示该函数的原型，也表示一个类的成员的集合。
每个函数都有一个prototype属性，这个属性指向函数的原型对象。

例一 JavaScript原生对象

例二构造函数

function Person() { }
Person.prototype.name = 'zhangsan'
var person1 = new Person()
var person2 = new Person()
console.log(person1.name)   //zhangsan
console.log(person2.name)   //zhangsan

例二中,函数的prototype指向了一个对象，而这个对象正是调用构造函数时创建的实例的原型，也就是person1和person2的原型。
原型的概念：每一个javascript对象(除null外)创建的时候，就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型中“继承”属性。
让我们用一张图表示构造函数和实例原型之间的关系：

二、 proto

每个对象(除null外)都会有的属性，叫做__proto__，这个属性会指向该对象的原型。

function Person() {}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true

console.log(person.__proto__ === Person.prototype); // true

综上所述,我们可以得到一张新的关系图
补充说明：
绝大部分浏览器都支持这个非标准的方法访问原型，然而它并不存在于 Person.prototype 中，实际上，它是来自于 Object.prototype ，与其说是一个属性，不如说是一个 getter/setter，当使用 obj.__ proto__ 时，可以理解成返回了 Object.getPrototypeOf(obj)。

三、constructor

每个原型都有一个constructor属性，指向该原型关联的构造函数。

function Person() {}
console.log(Person===Person.prototype.constructor)  //true

Person===Person.prototype.constructor
我们更新一下关系图
constructor补充说明

function Person() {}
var person = new Person();
console.log(person.constructor === Person); // true

当获取 person.constructor 时，其实 person 中并没有 constructor 属性,当不能读取到constructor 属性时，会从 person 的原型也就是 Person.prototype 中读取，正好原型中有该属性，所以：
person.constructor === Person.prototype.constructor

四、实例与原型、原型的原型

实例与原型
当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层为止。

function Person() {}Person.prototype.name = 'zhangsan';var person = new Person();person.name = 'lisi';
console.log(person.name) // lisidelete person.name;      //删除person name 属性
console.log(person.name) // zhangsan

在这个例子中，我们给实例对象 person 添加了 name 属性，当我们打印 person.name 的时候，结果自然为 lisi。
但是当我们删除了 person 的 name 属性时，读取 person.name，从 person 对象中找不到 name 属性就会从 person 的原型也就是 person.__ proto__ ，也就是 Person.prototype中查找，幸运的是我们找到了 name 属性，结果为 zhangsan。
但是万一还没有找到呢？原型的原型又是什么呢？
原型的原型
在前面，我们已经讲了原型也是一个对象，既然是对象，我们就可以用最原始的方式创建它，那就是：

var obj = new Object();
obj.name = 'zhangsan'
console.log(obj.name) // zhangsan

其实原型对象就是通过 Object 构造函数生成的，结合之前所讲，实例的 __ proto__ 指向构造函数的 prototype
这时我们可以再次更新关系图：

五、原型链

简单的回顾一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么假如我们让原型对象等于另一个类型的实例，结果会怎样？显然，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立。如此层层递进，就构成了实例与原型的链条。这就是所谓的原型链的基本概念。
——摘自《javascript高级程序设计》
那么Object.prototype 的原型呢？
console.log(Object.prototype.__proto__ === null) // true
引用阮一峰老师的《undefined与null的区别》就是：
null 表示“没有对象”，即该处不应该有值。

所以 Object.prototype.proto 的值为 null 跟 Object.prototype 没有原型，其实表达了一个意思。

所以查找属性的时候查到 Object.prototype 就可以停止查找了。

综上所述,关系图最终更新为：

new运算符的实现原理

当我们用new运算符new一个构造函数产生一个实例时，比如说： var obj = new Func 时，其背后的步骤是这样的：

1：创建一个继承自 Func.prototype 的新对象；
2：执行构造函数 Func ，执行的时候，相应的传参会被传入，同时上下文(this)会被指定为第一步创建的新实例；
3：如果构造函数返回了一个“对象”,那么这个对象会取代步骤1中new出来的实例被返回。如果构造函数没有返回对象,那么new出来的结果为步骤1创建的对象。

注意：new Func 等同于new Func()，只能用在不传递任何参数的情况。

按照上述原理，写一段代码模拟new运算符的实现原理：

var new1 = function(fun){var newObj = Object.create(fun.prototype);var returnObj = fun.call(newObj);if(typeof returnObj === 'object'){return returnObj}else{return newObj}
}

Object.create()方法Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。
var newObj = Object.create(fun.prototype) 的意思是：创建一个新对象newObj，并让 newObj.__ proto__ 指向 fun，即 newObj.__ proto__ === fun 返回true。

模拟new运算符之后进行验证

instanceof判断数据类型

instanceof是判断实例对象的__proto__和生成该实例的构造函数的prototype是不是引用的同一个地址。
是返回true，否返回false。
注意：实例的instanceof在比较的时候，与原型链上向上找的的构造函数相比都是true。
instanceof用来判断A是否为B的实例，表达式为：A instanceof B，如果A是B的实例，则返回true，否则返回false。instanceof检测的是原型，内部机制是通过判断对象的原型链中是否有类型的原型。

{} instanceof Object; //true
[] instanceof Array;  //true
[] instanceof Object; //true
"123" instanceof String; //false
new String(123) instanceof String; //truefunction Person1(){}
function Person2(){}
let person1=new Person1()
let person2=new Person2()
console.log(person1 instanceof Person1) //true
console.log(person2 instanceof Person2) //true
console.log(person1 instanceof Person2) //false

我们可以用下面的代码实现instanceof。

function instance(left,right){let prototype = right.prototype;  //获取类型的原型let proto = left.__proto__;       //获取对象的原型while(true){    //循环判断对象的原型是否等于类型的原型，直到对象原型为null，因为原型链最终为nullif (proto === null || proto === undefined){return false;}if (proto === prototype){return true;}proto = proto.__proto__;}
}
console.log(instance({},Object)); //true
console.log(instance([],Number)); //false

那怎么判断实例是由哪个构造函数生成的呢？这时候就要用到constructor了。
实例的原型的构造函数， obj.__ proto__.constructor
当一个函数F被定义时，JS引擎会为F添加prototype原型，然后在prototype上添加一个constructor属性，并让其指向F的引用，F利用原型对象的constructor属性引用了自身，当F作为构造函数创建对象时，原型上的constructor属性被遗传到了新创建的对象上，从原型链角度讲，构造函数F就是新对象的类型。这样做的意义是，让对象诞生以后，就具有可追溯的数据类型。

实例方法与静态方法

静态方法：

function Person(){}
Person.sayHello=function(){console.log("Hello world")
}
Person.sayHello()

实例方法：

function Person(){}
Person.prototype.sayHello=function(){console.log("Hello world")
}
let person=new Person()
person.sayHello()

静态方法：在构造函数本身上定义的方法，只能通过构造函数本身调用，new出来的对象不能够调用。

动态方法：也叫做实例方法，它是通过prototype原型对象添加的，所有的实例对象都能够继承调用。通过先定义一个引用变量，指向构造函数定义的新对象，数对象中的属性 prototype可以想成一个指针，指向一个方法。

参考文章

javascript——原型与原型链
详谈JavaScript原型链
继承与原型链
JS中new运算符的实现原理
js判断数据类型的四种方法
JS中的实例方法与静态方法
在js中动态方法与静态方法的区别

JavaScript详解原型和原型链相关推荐

ThoughtWorks技术专家详解：企业级区块链原来是这么玩的
ThoughtWorks技术专家详解:企业级区块链原来是这么玩的本文作者:恒亮编辑:温晓桦 2017-05-18 16:50 导语:企业区块链详解. 雷锋网(公众号:雷锋网)AI金融评论报道,5 ...
Javascript详解
Javascript详解案例一:使用JS完成注册页面的校验案例介绍用户在提交表单是,需要对用户填写的数据进行校验.因为用户如果输入非法内容,则会导致服务器的压力过大,因此,一般提供前端校验和后 ...
【JavaScript详解】一文掌握JavaScript基础知识（上）
JavaScript基础前言一.什么是JavaScript 1.JavaScript概述 2.javaScript有什么作用二.JavaScript快速入门 1.引入JavaScript 2.基 ...
JavaScript详解一
问题?JavaScript详解 1.在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它.(该变量的作用域是局部的). 您可以在不同的函数中使用名称相同的局 ...
详解设计模式：原型模式
原型模式(Prototype Pattern) ,是 GoF 的 23 种设计模式的一种,是用于创建重复的对象,同时又能保证性能.属于创建型模式,提供创建对象的最佳方式. 原型(Prototype), ...
Day03 javascript详解
day03 js 详解 JavaScript的基础 JavaScript的变量 JavaScript的数据类型 JavaScript的语句 JavaScript的数组 JavaScript的函数 Ja ...
超详细快速入门JavaScript详解(一)
目录一. JS概述&入门二.JS组成三. JS引入方式四. JS-注释五.JS-变量 1.基本数据类型 2.引用数据类型一. JS概述&入门我们为什么要学习JS?: 为了 ...
javascript详解函数原型对象prototype与constructor
1.原型模式首先我们来谈谈prototype属性,也就是原型属性.每当我们创建一个函数时,函数内部都会自动生成一个指针(既自动生成一个属性就是我们说的prototype),这个指针指向指向原型对象, ...
JavaScript 详解：为什么写好的代码非常重要
本文将通过简单的术语和真实世界的例子解释 JavaScript 中 this 及其用途,并告诉你写出好的代码为何如此重要. this 适合你吗? 我看到许多文章在介绍 JavaScript 的 thi ...

JavaScript详解原型和原型链

原型和原型链

一、prototype

二、 proto

三、constructor

四、实例与原型、原型的原型

五、原型链

new运算符的实现原理

instanceof判断数据类型

实例方法与静态方法

参考文章

JavaScript详解原型和原型链相关推荐

最新文章

热门文章

JavaScript详解原型和原型链

原型和原型链

一、prototype

二、__ proto __

三、constructor

四、实例与原型、原型的原型

五、原型链

new运算符的实现原理

instanceof判断数据类型

实例方法与静态方法

参考文章

JavaScript详解原型和原型链相关推荐

最新文章

热门文章

二、 proto