js三座大山——原型及原型链

前言
js的三座大山（原型及原型链、作用域及闭包，异步执行机制及单线程），一直是前端学习和面试中常常遇到的话题，所以深入学习这一块的知识还是很有必要的，下面详细讲解一下我对这一块的理解，记录一下学习过程。这一节主要讲一下原型及原型链，js是面向对象编程，在es6提出class概念前是如何实现类及继承关系的呢，就是通过原型和原型链来实现的。
一、构造函数、实例、原型对象
通过一个例子来看一下这三者之间的关系

function Person(name, age) { // Person的构造函数this.name = name;this.age = age;this.getInfo = function() {console.log('name:'+this.name + ';age:' + this.age)}
}var person1 = new Person('小明', 13); // 一个Person的实例对象
var person2 = new Person('小红', 11); // Person的另一个实例对象console.log(person1)
console.log(person2)console.log(person1 === person2) // false
console.log(person1.constructor === Person) // true
console.log(person2.constructor === Person) // true
console.log(person1.constructor === person2.constructor) // true
console.log(person1.__proto__ === Person.prototype) // true
console.log(Person.prototype.constructor === Person) // true

可以看出实例的constructor属性都是指向构造函数的，实例对象的__proto__属性指向构造函数的prototype属性（即原型对象），可以得出如下的关系图：

二、原型之间的继承关系
上面是一个基本的原型关系单元，原型的继承关系是通过原型链来实现的，这里要弄清楚一点，实例对象有属性__proto__，构造函数有属性prototype，而原型对象(构造函数的prototype属性)其实也是实例对象，因此原型对象也有__proto__属性，而原型对象之间的链接就是通过该属性形成的。
普通对象都会继承Object，用一个例子来看看

function Person(name, age) { // Person的构造函数this.name = name;this.age = age;
}
var p = new Person('a', 33); // 实例对象console.log(Object.prototype.constructor === Object) // true
console.log(Person.prototype.__proto__ === Object.prototype) // true

可以看出Object原型对象(Object.prototype)的构造函数就是Object，Person原型对象(Person.prototype)的__proto__属性指向Object的原型对象(Object.prototype)，可以得出如下原型关系图：

三、原型之间的继承
上面已经知道的原型之间的继承关系，那么原型之间是怎么继承的还不知道，其实当使用一个对象的属性和方法时，如果当前对象找不到，就会沿着原型链向上搜索，直到原型链的顶端，用一个简单的例子

Object.prototype.age = 12;
Object.prototype.getName = function() {console.log('name:' + this.name);
}
function Person(name, age) {this.name = name;this.getAge = function() {console.log('age:' + this.age)}
}
var p = new Person('hhh');
p.getAge(); // age:12
p.getName(); // name:hhh

从上面的例子可以看出，Person的原型继承了Object原型的age属性和getName方法，当前对象没有age属性时，就会沿着原型链向上找Object原型的有没有age属性，找到就返回，如果没有就继续向上搜索，直到原型链顶端。方法的继承也是一样。
四、扩展
其实构造函数只是函数的一种，构造函数也属于函数实例对象，其构造函数是Function。另外，Object.prototype的__proto__属性指向null。

function Person(name, age) {this.name = name;
}
console.log(Person.constructor === Function) // true
console.log(Object.constructor === Function) // true
console.log(Person.__proto__ === Function.prototype) // true
console.log(Object.__proto__ === Function.prototype) // true
console.log(Function.prototype.__proto__ === Object.prototype) // true

因此可以得出如下关系图：

js三座大山——原型及原型链相关推荐

【一天时间|JavaScript基础】原型和原型链
一天时间系列文章是博主精心整理的面试热点问题和难点问题,吸收了大量的技术博客与面试文章,总结多年的面试经历,带你快速并高效地审视前端面试知识.直击技术痛点,主动出击,精密打击,这才是面试拿到高薪的秘诀 ...
web前端面试高频考点——JavaScript 篇（一）【JS的三座大山】原型和原型链、作用域和闭包、异步
系列文章目录 JavaScript 知识梳理,收录了web前端面试 95%以上的高频考点,满满的干货.给你做一个高效的知识梳理,为你的面试保驾护航! 内容参考链接 HTML & CSS 篇 ...
（五）JS基础知识二（通过图理解原型和原型链）【三座大山之一，必考！！！】
JS基础知识二(原型和原型链) 提问 class 继承类型判断(instanceof) 原型原型关系基于原型的执行规则原型链说明提问如何准确判断一个变量是不是数组 class的原型本质 ...
浅谈JS原型与原型链（一）
最近学习JavaScript原型与原型链的时候,被这块知识烧得脑壳疼,prototype与__proto__混淆不清.网上各种图解,都画的好复杂,绕老绕去,不明所以,看得越来越糊涂.还是亲自动手敲敲, ...
JS原型与原型链终极详解
一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象.下面举例说明 functi ...
js原型和原型链_重学js --原型与原型链
一.什么是原型: .每个对象都有一个__proto__属性,并且指向它的prototype原型对象每个构造函数都有一个prototype原型对象 prototype原型对象里的constructor ...
js原型和原型链_JS里的原型和原型链
JS里的原型与原型链原型原型和原型链的目的是解决构造函数生成的对象内共同属性重复生成的问题,使其更高效.在下面这个例子里每次生成一个实例对象都要生成一个mmm方法,没有必要,完全可以共享. 构造函 ...
最详细的讲解 JS 原型与原型链
文章目录一. 普通对象与函数对象二. 构造函数三. 原型对象四. proto 五. 构造器六. 原型链七. Prototype 总结一. 普通对象与函数对象 JavaScript 中,万 ...
js原型、原型链、作用链、闭包全解
https://www.2cto.com/kf/201711/698876.html [对象.变量] 一个对象就是一个类,可以理解为一个物体的标准化定义.它不是一个具体的实物,只是一个标准.而通过对象 ...

js三座大山——原型及原型链

js三座大山——原型及原型链相关推荐

最新文章

热门文章