文章目录

• • 原型链
  • • 一、概念
    • 二、链式结构
  • ES6的类语法

原型链

一、概念

构造函数的prototype里面的__proto__属性指向哪里？

对象的__proto__和对象的构造函数原型是同一个对象

一个对象所属的构造函数：

// 数组
const arr = [1,2,3];
console.log(arr.constructor); // Array
// 函数
const fn = function(){};
console.log(fn.constructor); // Function
// 对象
const obj = {};
console.log(obj.constructor); // Object
// 正则
const reg = /abc/
console.log(reg.constructor); // RegExp

每一个对象的__proto__上面都有一个自带属性：constructor，就是这个对象的构造函数

当一个对象不知道准确是谁构造的，就把它当做Object构造的实例对象

Object是顶级构造对象

function Human(){}
console.log(Human.prototype);// 找到Human对象的构造函数
console.log(Human.prototype.constructor);// Human(){} 因为函数本身有内容，所以找到了自身
console.log(Human.prototype.__proto__.constructor)// Object(){} 指定去原型里面找，证明了Human这个对象是Object构造的实例对象

二、链式结构

对象的__proto__指向其构造函数的原型prototype

以一个实例对象为起点，沿着__proto__形成的链条，就是原型链

在原型链的末尾是Object.prototype, Object.prototype.__proto__就是null

原型链的访问原则：

访问一个对象的属性时，如果自己没有就去 __proto__ 上找，
如果__proto__有就返回结果，如果没有就继续去__proto__上找，
一直找到Object.prototype里面都没有，就返回undefined.

const h2 = new Human();
/*h2 = {name:'lucy',__proto__ = Human.prototype ={sayHi:function(){},__proto__ = Object.prototype = {toString:function(){},__proto__:null}}}==> 代表沿着__proto__h2 ==> Human.prototype ==> Object.prototype ==> null
*/

const arr = [12,34,56];
/*arr = {0:12,1:34,2:56,length:3,__proto__:Array.prototype = {push:function(){},__proto__:Object.prototype = {toString:function(){},__proto__:null}}}==> 代表沿着__proto__arr => Array.prototype ==> Object.prototype ==> null测试发现下方的链，这是现代新版浏览器的解析结果，后面都是重复的，在编程思想上，只需要理解上方的原型链即可。arr => Array.prototype ==> Object.prototype ==> Array.prototype ==> Object.prototype 	==> Object.prototype ==> null
*/

面试题：如何精确判断数据类型？

提示：如何调用Object.prototype上的toString方法？

ES6的类语法

es6新增一个class语法，用于书写类（等价于es5语法中的构造函数）

语法：class 类名{constructor(){给对象添加属性} 给对象添加方法}

class Person(){constructor(name,age){this.name = name;this.age = age;}// 给对象添加方法，就是添加在构造函数的原型上sayHi(){console.log('hi');}sayName(){// 原型方法中的this是实例对象console.log(this.name);}
}
// 实例对象
const p1 = new Person('lucy',12);
console.log(p1);
/*p1 = {name = 'lucy',age = 12,__proto__:{sayHi(){},sayName(){},}}
*/