前端面试必杀技：原型、原型链以及继承（一张图搞定面试）
对象基础
对象介绍
-
什么是对象面试
- 多个数据（属性）的集合；
- 用来保存多个数据（属性）的容器；
-
属性组成数组
- 属性名：字符串（标识）；
- 属性值：任意类型；
-
属性的分类：bash
- 通常：属性值不是function，描述对象的状态；
- 方法：属性值为function的属性，描述对象的行为；
-
特别的对象函数
- 数组：属性名是0，1，2，3之类的索引；
- 函数：可执行的；
-
对象是一种复合数据类型，能够保存不一样类型的属性；ui
-
建立对象this
var obj = new object(); 复制代码 -
向对象中添加属性spa
- .属性名；
- ['属性名']：属性名有特殊字符/属性名是一个变量；
obj.属性名 = 属性值； obj[‘属性名’] = 属性值； 复制代码使用[]去操做属性时，[]中传递的是一个字符串。能传字符串的地方就能传变量；- 若是咱们对象的属性名过于奇怪，则必须使用[]来操做。
对象建立模式
1.对象字面量模式
- 套路: 使用{}建立对象, 同时指定属性/方法;
- 适用场景: 起始时对象内部数据是肯定的；
- 问题: 若是建立多个对象, 有重复代码;
var p = {
name: 'Tom',
age: 23,
setName: function (name) {
this.name = name
}
}
console.log(p.name, p.age)
p.setName('JACK')
console.log(p.name, p.age)
var p2 = {
name: 'BOB',
age: 24,
setName: function (name) {
this.name = name
}
}
复制代码
2.Object构造函数的模式
- 套路: 先建立空Object对象, 再动态添加属性/方法
- 适用场景: 起始时不肯定对象内部数据；
- 问题: 语句太多；
// 一我的: name:"Tom", age: 12
var p = new Object()
p = {}
p.name = 'Tom'
p.age = 12
p.setName = function (name) {
this.name = name
}
p.setaAge = function (age) {
this.age = age
}
console.log(p)
复制代码
3.工厂模式
- 套路: 经过工厂函数动态建立对象并返回；
- 适用场景: 须要建立多个对象；
- 问题: 对象没有一个具体的类型，都是Object类型；
// 工厂函数: 返回一个须要的数据的函数
function createPerson(name, age) {
var p = {
name: name,
age: age,
setName: function (name) {
this.name = name
}
}
return p
}
var p1 = createPerson('Tom', 12)
var p2 = createPerson('JAck', 13)
console.log(p1)
console.log(p2)
复制代码
4.自定义构造函数模式；
- 套路: 自定义构造函数，经过new建立对象；
- 适用场景: 须要建立多个类型肯定的对象；
- 问题: 每一个对象都有相同的数据, 浪费内存；将属性和方法添加到各个实例对象上去，可是每一个实例都有相同的方法，重复了，咱们能够将相同的方法放到他的构造函数的原型对象上去；
function Person(name, age) {
this.name = name
this.age = age
this.setName = function (name) {
this.name = name
}
}
var p1 = new Person('Tom', 12)
var p2 = new Person('Tom2', 13)
console.log(p1, p1 instanceof Person)
复制代码
对象高级
原型与原型链
什么是原型
一、prototype本质上仍是一个JavaScript对象； 二、每一个函数都有一个默认的prototype属性； 三、经过prototype咱们能够扩展Javascript的内建对象prototype
原型的扩展
- 全部函数都有一个特别的属性：prototype显式原型属性（只有函数有prototype，对象是没有的。）；
- 全部实例对象都有一个特别的属性：__proto__隐式原型属性；
- 原型是用于保存对象的共享属性和方法的，原型的属性和方法并不会影响函数自己的属性和方法。
- 显式原型与隐式原型的关系
- 函数的prototype：定义函数时被自动赋值，值默认为{}，即原型对象；
- 实例对象的_proto_: 在建立实例对象时被自动添加, 并赋值为构造函数的prototype值；
- 原型对象即为当前实例对象的父对象；
原型链
- 全部的实例对象都有__proto__属性, 它指向的就是原型对象
- 这样经过__proto__属性就造成了一个链的结构---->原型链；
- 当查找对象内部的属性/方法时, js引擎自动沿着这个原型链查找；
- 当给对象属性赋值时不会使用原型链, 而只是在当前对象中进行操做；
面试必画图
- 图片是我的画的图，面试官但凡问到原型链问题，就能够画出此图，而且边画边叙述，会给你蹭蹭地加分哦；
- 图片上有必说的语句，而且标明告终合画图时说这些语句的时机
new关键字作了什么
- 示例：
// 构造函数
function Base(){}
var baseObj = new Base()
复制代码
- 建立了一个空对象；
- 将这个空对象的隐式原型_proto_\指向构造函数的显示原型prototype；如例，是将空对象的__proto__成员指向了Base函数对象prototype成员对象；
- 将构造函数的this指向实例（即空对象），并调用构造函数Base；
var obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj);
复制代码
- 根据new的工做原理手动实现一下new运算符
let newObj = function(func){
//建立对象,错误示范：Object.create()方法建立一个新对象，使用现有的对象的prototype指向括号中的对象func.prototype。
// let obj = Object.create(func.prototype)
// 因此应该以下创造对象，是为了使新建立的对象的__proto__指向构造函数的原型func.prototype
let obj = new Object()
obj.__proto__=func.prototype
// 将构造函数的做用域给新的对象，而且执行构造函数
// 若是构造函数有返回值，那就返回返回值，若是没有，会返回undefined
let k = func.call(obj)
if(typeof k === 'object'){
// 若是返回的类型是一个对象，那就返回该对象
return k
}else{
// 若是构造函数执行后，返回的类型不是一个对象的话，那就返回建立的对象
return obj
}
}
复制代码
对象的继承
复制属性式继承
// 建立父对象
var parentObj = {
name: 'parentName',
age: 25,
showName:function(){
console.log(this.name);
}
}
// 建立须要继承的子对象
var childrenObj= {}
// 开始拷贝属性(使用for...in...循环)
for(var i in parentObj){
childrenObj[i] = parentObj[i]
}
console.log(childrenObj); //{ name: 'parentName', age: 25, showName: [Function: showName] }
console.log(parentObj); // { name: 'parentName', age: 25, showName: [Function: showName] }
复制代码
- 重点：将父对象的函数和方法循环进行复制，复制到子对象里；
- 缺点：若是继承过来的成员是引用类型的话，那么这个引用类型的成员在父对象和子对象之间是共享的，也就是说修改了以后, 父子对象都会受到影响。
原型继承：//TODO
- 原型式继承就是借用构造函数的原型对象实现继承，即 子构造函数.prototype = 父构造函数.prototype；
// 建立父构造函数
function Parent(){}
// 设置父构造函数的原型对象
Parent.prototype.age = 25;
Parent.prototype.friends = ['小名','小丽'];
Parent.prototype.showAge = function(){
console.log(this.age);
};
// 建立子构造函数
function Child(){}
// 设置子构造器的原型对象实现继承
Child.prototype = Parent.prototype
// 由于子构造函数的原型被覆盖了, 因此如今子构造函数的原型的构造器属性已经再也不指向Child，而是Parent。此时实例化Child和实例化parent的区别是不大的，因此再次建立Child是没有意义的，而且Child.prototype添加属性，也是会影响到Parent.prototype；
console.log(Child.prototype.constructor == Parent);// true
console.log(Parent.prototype.constructor == Parent);// true
// 问题就在这里！！！！
// 因此咱们须要修正一下
Parent.prototype.constructor = Child;
// 上面这行代码以后, 就实现了继承
var childObj = new Child();
console.log(childObj.age);// 25
console.log(childObj.friends);// ['小名','小丽']
childObj.showAge();// 25
复制代码
- 问题：
- 只能继承父构造函数的原型对象上的成员, 不能继承父构造函数的实例对象的成员；
- 父构造函数的原型对象和子构造函数的原型对象上的成员有共享问题；
原型链继承 : 获得方法
// 定义父构造函数
function Parent(name,friends){
this.name = name;
this.friends = friends;
}
Parent.prototype.test = function(){
console.log('原型方法', this.friends)
};
// 定义子构造函数
function Child(name,friends,age){
this.age = '12'
}
// 将子构造函数的原型指定父函数的实例
Child.prototype = new Parent('parentName',['a','b','c']);
// 可是
console.log(Child.prototype.constructor);
//输出：function Parent(){this.name = 'me';this.sex = ['male','female']}
// 因此，把Child的原型的构造函数修复为child
Child.prototype.constructor = Child
var childObj = new Child('childName',[3,4,'ddd'],24);//有test()
// 问题一：子实例没法向父类传值
console.log(childObj.name,childObj.friends) // parentName和["a", "b", "c"]
// 问题二：若是其中一个子类修改了父类中的引用数据类型的属性，那么就会影响其余的子类
var childObj2 = new Child('childName',[3,4],24);
childObj2.friends.push('additem')
console.log(childObj1.friends,childObj2.friends)// ["a", "b", "c", "additem"]， ["a", "b", "c", "additem"]
复制代码
- 重点：让新实例（继承对象childObj）的构造函数（Child）的原型等于父类的实例（被继承的实例 new Parent()），或者说将父类的实例做为子类的原型；
- 特色：
- 实例可继承的属性有：实例的构造函数的属性，父类构造函数属性，父类原型的属性。
- 缺点：
- 一、新实例没法向父类的构造函数中传递参数。
- 二、继承单一。
- 三、全部新实例都会共享父类实例的属性。（原型上的属性是共享的，一个实例修改了原型属性，另外一个实例的原型属性也会被修改！）
借用构造函数call（经典继承） : 获得属性
- 使用父类的构造函数来加强子类实例，等因而复制父类的实例属性给子类（没用到原型）；
- 问题：Child没法继承Parent原型上的对象，并无真正的实现继承（部分继承）；
function Parent(xxx){this.xxx = xxx}
Parent.prototype.test = function(){};
function Child(xxx,yyy){
Parent.call(this, xxx);
}
var child = new Child('a', 'b'); //child.xxx为'a', 但child没有test()
// 问题：
console.log(child.test);// undefined
复制代码
- 特色
- 建立子类实例时，能够向父类传递参数
- 能够实现多继承（call多个父类对象）
组合式继承
- 借用构造函数 + 原型式继承
// 建立父构造函数
// 父类属性
function Parent(name){
this.name = name;
this.sex = ['male','female']
}
// 父类原型方法
Parent.prototype.test = function(){
console.log(this.name)
};
// 定义子构造函数
function Child(name,age){
// 复制父级构造函数的属性和方法
// 使得每个子对象都能复制一份父对象的属性且不会相互影响
Parent.call(this,name);//继承实例属性，第一次调用Parent()
this.age = age
}
// 将子构造函数的原型对象指向父级实例
var parentObj = new Parent();//继承父类方法，第二次调用Parent()
Child.prototype = parentObj; //获得test()
// 将子构造函数Child原型的构造函数修复为Child
Child.prototype.constructor = Child;
var childObj = new Child('zhangsan',15); console.log(childObj,childObj.name,childObj.sex,childObj.test)
// 输出：childObj.name:'zhangsan';childObj.sex:["male", "female"];childObj.test：一个函数
复制代码
- 至关重要的一步：Child.prototype.constructor = Child;
- 1.任何一个Prototype对象都有一个constructor指针，指向它的构造函数；
- 2.每一个实例中也会有一个constructor指针，这个指针默认调用Prototype对象的constructor属性。
- 结果：当替换了子类的原型以后，即 Child.prototype = new Parent()以后，Child.prototype.constructor 就指向了Parent()，Child的实例的constructor也指向了Parent()，这就出现问题了。
- 由于这形成了继承链的紊乱，由于Child的实例是由Child构造函数建立的，如今其constructor属性却指向了Parent,为了不这一现象，就必须在替换prototype对象以后，为新的prototype对象加上constructor属性，使其指向原来的构造函数。
- 缺点：经过将子构造函数的原型指向父构造函数的实例，会两次调用父类构造函数；
寄生组合式继承
- 原理：经过借用构造函数来继承属性，经过原型链的混成形式来继承方法。
- 思路：没必要为了指定子类的原型而调用超类型的构造函数，咱们所须要的无非就是超类型原型的一个副本而已。
- 寄生组合式继承就是为了下降调用父类构造函数的开销而出现的 ;
- 本质上，就是使用寄生式继承来继承父类型的原型，而后再将结果指定给子类型的原型。
- 解决方法是在中间架一座桥梁，加一个空的构造函数；
// 建立父构造函数
function Parent(){
this.name = 'me';
this.sex = ['male','female']
}
Parent.prototype.test = function(){};
// 定义子构造函数
function Child(){
// 复制父级构造函数的属性和方法
// 使得每个子对象都能复制一份父对象的属性且不会相互影响
Parent.call(this);
this.age = '12'
}
// 定义空函数
function F(){}
// 把空函数的原型指向Parent.prototype
// 寄生式组合继承
F.prototype = Parent.prototype
// 将子构造函数的原型对象指向空函数F的实例对象fObj
var fObj = new F();
Child.prototype = fObj;
// 将子构造函数Child原型的构造函数修复为Child
Child.prototype.constructor = Child;
var childObj = new Child();
复制代码
- 优势：高效率体如今只调用了一次Parent构造函数，而且所以避免了在Child.prototype上面建立没必要要的，多余的属性。与此同时，原型链还能保持不变；所以，还能正常使用instanceof 和 isPrototypeOf()。
- 开发人员广泛认为寄生式组合式继承是引用类型最理想的继承范式。
相关文章
- 1. 【前端面试】原型和原型链
- 2. 前端面试必考的八种JS原型继承方法
- 3. 原型和原型链以及继承
- 4. JS原型、原型链以及继承
- 5. 面试必备系列（一）：原型链与继承
- 6. 原型，原型链，继承
- 7. 原型、原型链、继承
- 8. 前端面试之原型链总结
- 9. 前端面试5：原型链
- 10. 原型、原型链及继承关系
- 更多相关文章...
- • C# 继承 - C#教程
- • Swift 继承 - Swift 教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • Kotlin学习（二）基本类型
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 【前端面试】原型和原型链
- 2. 前端面试必考的八种JS原型继承方法
- 3. 原型和原型链以及继承
- 4. JS原型、原型链以及继承
- 5. 面试必备系列（一）：原型链与继承
- 6. 原型，原型链，继承
- 7. 原型、原型链、继承
- 8. 前端面试之原型链总结
- 9. 前端面试5：原型链
- 10. 原型、原型链及继承关系