今天这篇文章整理了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原型继承)的更多相关文章

  1. 2010年腾讯前端面试题学习(js部分)

    看了牛人写的回忆文章,里面有2010年腾讯的前端面试题,里面涉及到不少基础性的问题,学习一下:) 原文地址:https://segmentfault.com/a/1190000012998107 js ...

  2. 前端面试题总结(js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源)

    写在前面 参考答案及资源在看云平台发布,如果大家想领取资源以及查看答案,可直接前去购买.一次购买永久可看,文档长期更新!有什么意见与建议欢迎您及时联系作者或留言回复! 文档描述 本文是关注微信小程序的 ...

  3. 前端面试题整理(js)

    1.HTTP协议的状态消息都有哪些? HTTP状态码是什么: Web服务器用来告诉客户端,发生了什么事. 状态码分类: 1**:信息提示.请求收到,继续处理2**:成功.操作成功收到,分析.接受3** ...

  4. Ajax常见面试题 -- 前端面试题(二)

    1:什么是ajax?ajax作用是什么? 异步的javascript和xml AJAX 是一种用于创建快速动态网页的技术. ajax用来与后台交互   2:原生js ajax请求有几个步骤?分别是什么 ...

  5. 自言自语WEB前端面试题(二)

    今天换道题,新鲜出炉的 var Model=function(){ this.name='lilei'; this.age=20; } Model.prototype.say=function(){ ...

  6. 前端面试题总结一(js变量和函数声明提前相关)

    好久没有更新博客了,^_^写写博客吧!下面是我总结的一些面试题,希望对大家有所帮助 (1)题目如下: alert(a)  var a=1  function a(){    alert(a) } 好多 ...

  7. 各大互联网公司前端面试题(js)

    对于巩固复习js更是大有裨益.    初级Javascript: 1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型 ...

  8. 前端面试题 -- JS篇

    前端面试题 -- JS篇 类型 1.js中有哪些数据类型,并解释清楚原始数据类型和引用数据类型 js中共有null,undefined, string,number,boolean,object六种数 ...

  9. 前端面试题总结(二)CSS篇

    前端面试题总结(二)CSS篇 一.link和@import的区别? link属于HTML标签,可以引入出css以外的事务,如RSS,而@import是css提供的,只能加载css文件. link会在页 ...

随机推荐

  1. JUnit4快速入门

    JUnit最佳实践 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 public class CardServiceTest {     /**      * 最佳 ...

  2. Oracle E-Business Suite Maintenance Guide Release 12.2(Patching Procedures)

    更多内容参考: http://docs.oracle.com/cd/E51111_01/current/acrobat/122ebsmt.zip Preparing for Patching For ...

  3. C语言之将无符号字符型转化为ascii码值

    这个宏是在linux内核中获取的,主要的功能是能够将一个无符号字符型的参数转化为ASCII码值. ASCII : ASCII 编码里包括了128个字符.用 十进制 0  到 127 来表示 .那就对了 ...

  4. Spring--ClassPathXmlApplicationContext

    public class ClassPathXmlApplicationContext extends AbstractXmlApplicationContext { private Resource ...

  5. MongoDB 3.0新增特性一览

    转自:http://blog.sina.com.cn/s/blog_48c95a190102vedr.html 引言 在历经版本号修改(2.8版本直接跳到3.0版本)和11个rc版本之后,MongoD ...

  6. Markdown语法及编辑器

    宗旨 Markdown 的目标是实现「易读易写」. 可读性,无论如何,都是最重要的.一份使用 Markdown 格式撰写的文件应该可以直接以纯文本发布,并且看起来不会像是由许多标签或是格式指令所构成. ...

  7. Mina源码阅读笔记(五)—Mina对连接的操作IoSession

    IoSession是Mina管理两端的一个重要部分,也是Mina的核心,Session具有了生命周期的概念,它的生命周期和连接时紧密相关的,这点在后面的介绍中会涉及.另外,好像hibernate中也有 ...

  8. obj-c编程02:给类自动合成存取方法

    我们在此篇对obj-c编程01中的Box的例子稍加改动,一是添加的自动合成存取器,二是将Box按照其标准的写法分成3个文件,即头文件Box.h,类实现文件Box.m,以及主文件test.m. 1.Bo ...

  9. Unity脚本编程之——协程(Coroutine)

    本文翻译自Unity官方文档:https://docs.unity3d.com/Manual/Coroutines.html 专有名词: Coroutine 协程 Alpha 不透明度 当你调用一个函 ...

  10. Java不走弯路教程(5.Client-Server模式(2)-Client)

    5.Client-Server模式(2)-Client 在上一章,我们完成一个简单的数据库服务器,并在客户端用telnet方式成功进行通信. 本章将用Java实现客户端程序,来代替telnet. 先看 ...