前端面试题总结二(js原型继承)

Posted hongsusu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端面试题总结二(js原型继承)相关的知识,希望对你有一定的参考价值。

今天这篇文章整理了JS原型和继承的一些知识点,面试的时候  基!本!都!会!问!还不快认真阅读下文,看看你还有哪些知识点需要掌握吧~

 

1.原型链

基本思想:利用原型让一个引用类型继承另外一个引用类型的属性和方法。

构造函数,原型,实例之间的关系:每个构造函数都有一个原型对象,原型对象包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。

原型链实现继承例子:

function a() {
this.name = ‘张三‘;
}
a.prototype.getName = function() {
return this.name;
}
function b() {
this.name = ‘李四‘;
}
//继承了a
b.prototype = new a();
b.prototype.getName = function (){
return this.name;
}
var instance = new b();
console.log(instance.getName());//‘李四‘

改简单点

function a() {
this.name = ‘张三‘;
}
a.prototype.getName = function() {
return this.name;
}

var instance = new a();
console.log(instance.getName());//‘张三‘

 
2.借用构造函数

基本思想:在子类型构造函数的内部调用超类构造函数,通过使用call()和apply()方法可以在新创建的对象上执行构造函数。

例子:

function a() {
this.colors = ["red","blue","green"];
}
function b() {
a.call(this);//继承了a
}
var instance1 = new b();
instance1.colors.push("black");
console.log(instance1.colors);//"red","blue","green","black"
var instance2 = new b();
console.log(instance2.colors);//"red","blue","green"
 
3.组合继承
 
基本思想:将原型链和借用构造函数的技术组合在一块,从而发挥两者之长的一种继承模式。

function a(name) {
this.name = name;
this.colors = ["red","blue","green"];
}
a.prototype.sayName = function() {
console.log(this.name);
}
function b(name, age) {
a.call(this,name);//继承属性
this.age = age;
}
//继承方法
b.prototype = new a();
b.prototype.constructor = b;//这个是为了让b的构造函数重新指回这个类本身,否则的话它会变成之前继承的那个类的构造函数,在后面再调用的时候可能会出现意想不到的情况

b.prototype.sayAge = function() {
console.log(this.age);
}
var instance1 = new b("Hong",18);
instance1.colors.push("black");
console.log(instance1.colors);//"red","blue","green","black"
instance1.sayName();//"Hong"
instance1.sayAge();//18
var instance2 = new b("su",20);
console.log(instance2.colors);//"red","blue","green"
instance2.sayName();//"su"
instance2.sayAge();//20

 

3.寄生组合继承

function beget(obj){   // 生孩子函数 beget:龙beget龙,凤beget凤。

    var F = function(){};

    F.prototype = obj;

    return new F();

}

function Super(){

    // 只在此处声明基本属性和引用属性

    this.val = 1;

    this.arr = [1];

}

//  在此处声明函数

Super.prototype.fun1 = function(){};

Super.prototype.fun2 = function(){};

//Super.prototype.fun3...

function Sub(){

    Super.call(this);   // 核心

    // ...

}

var proto = beget(Super.prototype); // 核心

proto.constructor = Sub;            // 核心

Sub.prototype = proto;              // 核心

 

var sub = new Sub();

alert(sub.val);

alert(sub.arr);

这个方式是最佳方式,但是太麻烦,一般只是课本上用,不多解释

 

4寄生式继承

function beget(obj){   // 生孩子函数 beget:龙beget龙,凤beget凤。

    var F = function(){};
    F.prototype = obj;
    return new F();
}
function Super(){
    this.val = 1;
    this.arr = [1];
}
function getSubObject(obj){
    // 创建新对象
    var clone = beget(obj); // 核心
    // 增强
    clone.attr1 = 1;
    clone.attr2 = 2;
    //clone.attr3...
 
    return clone;
}
 
var sub = getSubObject(new Super());
alert(sub.val);     // 1
alert(sub.arr);     // 1
alert(sub.attr1);   // 1
 
想了解ES6中的继承请关注下一篇文章



































以上是关于前端面试题总结二(js原型继承)的主要内容,如果未能解决你的问题,请参考以下文章

总结前端面试过程中最容易出现的问题

前端面试题

vue面试题总结

前端JavaScript面试技巧

js面试题-----原型和原型链

这一次带你彻底搞懂JS继承