【前端基本进阶】JS原型、原型链、对象详解

2019年8月31日 111次阅读 来源: SuperX

一. 一般对象与函数对象

JavaScript 中，万物皆对象！但对象也是有辨别的。分为一般对象和函数对象，Object 、Function 是 JS 自带的函数对象。下面举例说明

var o1 = {}; 
var o2 =new Object();
var o3 = new f1();

function f1(){}; 
var f2 = function(){};
var f3 = new Function('str','console.log(str)');

console.log(typeof Object); //function 
console.log(typeof Function); //function  

console.log(typeof f1); //function 
console.log(typeof f2); //function 
console.log(typeof f3); //function   

console.log(typeof o1); //object 
console.log(typeof o2); //object 
console.log(typeof o3); //object

在上面的例子中 o1 o2 o3 为一般对象，
f1 f2 f3 为函数对象。
怎样辨别，实在很简单，通常经由历程 new Function() 建立的对象都是函数对象，其他的都是一般对象。
f1,f2,归根结柢都是经由历程 new Function()的体式格局举行建立的。

Function Object 也都是经由历程 New Function()建立的。

二. 组织函数

我们先温习一下组织函数的学问：

function Person(name, age, job) {
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayName = function() { alert(this.name) } 
}
var person1 = new Person('Zaxlct', 28, 'Software Engineer');
var person2 = new Person('Mick', 23, 'Doctor');

上面的例子中 person1 和 person2 都是 Person 的实例。这两个实例都有一个 constructor （组织函数）属性，该属性（是一个指针）指向 Person。 即：

  console.log(person1.constructor == Person); //true
  console.log(person2.constructor == Person); //true

我们要记着两个观点（组织函数，实例）：

person1 和 person2 都是 组织函数 Person 的实例

一个公式：

实例的组织函数属性（constructor）指向组织函数。

三. 原型对象

在 JavaScript 中，每当定义一个对象（函数也是对象）时刻，对象中都邑包括一些预定义的属性。个中每一个函数对象都有一个prototype 属性，这个属性指向函数的原型对象。

function Person() {}
Person.prototype.name = 'Zaxlct';
Person.prototype.age  = 28;
Person.prototype.job  = 'Software Engineer';
Person.prototype.sayName = function() {
  alert(this.name);
}
  
var person1 = new Person();
person1.sayName(); // 'Zaxlct'

var person2 = new Person();
person2.sayName(); // 'Zaxlct'

console.log(person1.sayName == person2.sayName); //true

我们得到了本文第「定律」：

1.每一个对象都具有一个名为__proto__的属性；

2.每一个组织函数（组织函数规范为大写开首，如Function()，Object()等等JS中自带的组织函数，以及本身建立的）都具有一个名为prototype的要领（注重：既然是要领，那末就是一个对象（JS中函数一样是对象），所以prototype一样带有__proto__属性）；

3.每一个对象的__proto__属性指向本身组织函数的prototype；

4.每一个对象都有 、__proto__ 属性，但只要函数对象才有 prototype 属性

四. 原型链

五、原型链
原型对象实在也是一般的对象。险些一切的对象都多是原型对象，也多是实例对象，而且还可以同时是原型对象与实例对象。如许的一个对象，恰是组成原型链的一个节点。因而理解了原型，那末原型链并非一个何等庞杂的观点。
我们晓得一切的函数都有一个叫做toString的要领。那末这个要领究竟是在那里的呢？
先随便声明一个函数：

function add() {}

那末我们可以用以下的图来示意这个函数的原型链。

《【前端基本进阶】JS原型、原型链、对象详解》

原型链

个中add是Function对象的实例。而Function的原型对象同时又是Object原型的实例。如许就组成了一条原型链。原型链的接见，实在跟作用域链有很大的相似之处，他们都是一次单向的查找历程。因而实例对象可以经由历程原型链，接见到处于原型链上对象的一切属性与要领。这也是foo终究可以接见到处于Object原型对象上的toString要领的缘由。
基于原型链的特征，我们可以很轻松的完成继续。

详细基本学问相识后，我们剖析下图

《【前端基本进阶】JS原型、原型链、对象详解》

第一

先从实例add()剖析
实例add() 为 Function的实例
所以
add()的__proto__指向其组织函数的原型即 Function.prototype

var add = function () {}
add.__proto__ === Function.prototype//true

特别注重 组织函数Funciton的__proto__指向本身的Function.prototype

Function.__proto__ === Function.prototype//true

所以组织函数Function的__proto__和prototype都指向Function.prototype

第二

由于Function和Object都是js自带函数
且 Object 也是由 new Function建立而来

typeof Function
"function"
typeof Object
"function"

所以 Object的__proto__指向Function的原型对象即 Function.prototype

Object.__proto__ === Function.prototype
true

因而 Object 的 prototype 和 Function.prototype的 __proto__都指向 Object.prototype

第三

Object.prototype被称为原型链的E端，由于它的__proto__为null

    原文作者：SuperX
    原文地址: https://segmentfault.com/a/1190000018308979
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞