原型原型链到底是什么

184 阅读2分钟

前言: 平时只知道完成功能,对于最基本的知识点掌握的真的太不足了,在面试过程中也充分暴露了自己学习习惯的问题,浅尝辄止,面对面试官热心的提问,憋的脸红。。。。总之当事人很后悔,非常后悔...(背景音乐:初见 PS:李狗子太帅了!!!)

构造函数 和 普通函数 区别:

1、函数名一般大写

2、函数内部this的指向是构造函数本身

 function Person(age,name){
     this.age = age;
     this.name = name;
     this.getName = function(){
       console.log(this.name)
     }
 }
 
 Person.prototype.getAge = function(){
    console.log(this.age)
 }
 let person1 = new Person(11,'Lily');
 let person2 = new Person(12,'Lisa');

Person 作为一个构造函数,在函数内部声明了自有属性age,name,在创建函数的同时也创建了一个与之对应的原型对象,每个函数都会有prototype属性,可以通过prototype进行访问,即 Person.prototype ,反之 原型对象通过属性 constructor 与其构造函数关联; person1 是通过new 构造函数进行创建的,天然继承了Person中的自由属性,以及Person原型对象上的属性,实例对象可以通过__proto__访问其构造函数的原型,即

Person.prototype === person1.__proto__ // true  PS:注意陷阱 前提是构造函数中没有return

1、什么是原型?

每个函数在创建的时候会同时对应生成一个与之相关的原型对象,同prototype属性访问到的对象即为 该函数的原型对象,原型实际上就是一个普通对象;

2、如何访问原型对象呢?

person1.__proto__ // 存在浏览器兼容性问题
person1.constructor.prototype  // 此处可能会有疑问了,为什么可以使用constructor呢,其实constructor是原型的方法,因为实例可以向上查找,so you know,但是如果constructor的属性被覆盖了那么,该方法也是不够保险的
Object.getPrototypeOf(person1)  // 推荐使用,该方法返回指定对象的原型

示例:
let obj1 = {}
let obj2 = Object.create(obj1) // 使用现有的对象来提供新创建的对象的__proto__,类似于创建了一个obj1的实例
Object.getPrototypeOf(obj2) === obj1 // true

3、原型链

实现继承的主要方法。 其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。 每个构造函数都有一个prototype属性,指向原型对象。 原型对象都包含一个指向构造函数的指针(constructor) 如图:

image.png

更形象的一个图(源自百度图库)

image.png