前端面试题总结二(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());//'张三'
基本思想:在子类型构造函数的内部调用超类构造函数,通过使用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"
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
前端面试题总结二(js原型继承)的更多相关文章
- 2010年腾讯前端面试题学习(js部分)
看了牛人写的回忆文章,里面有2010年腾讯的前端面试题,里面涉及到不少基础性的问题,学习一下:) 原文地址:https://segmentfault.com/a/1190000012998107 js ...
- 前端面试题总结(js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源)
写在前面 参考答案及资源在看云平台发布,如果大家想领取资源以及查看答案,可直接前去购买.一次购买永久可看,文档长期更新!有什么意见与建议欢迎您及时联系作者或留言回复! 文档描述 本文是关注微信小程序的 ...
- 前端面试题整理(js)
1.HTTP协议的状态消息都有哪些? HTTP状态码是什么: Web服务器用来告诉客户端,发生了什么事. 状态码分类: 1**:信息提示.请求收到,继续处理2**:成功.操作成功收到,分析.接受3** ...
- Ajax常见面试题 -- 前端面试题(二)
1:什么是ajax?ajax作用是什么? 异步的javascript和xml AJAX 是一种用于创建快速动态网页的技术. ajax用来与后台交互 2:原生js ajax请求有几个步骤?分别是什么 ...
- 自言自语WEB前端面试题(二)
今天换道题,新鲜出炉的 var Model=function(){ this.name='lilei'; this.age=20; } Model.prototype.say=function(){ ...
- 前端面试题总结一(js变量和函数声明提前相关)
好久没有更新博客了,^_^写写博客吧!下面是我总结的一些面试题,希望对大家有所帮助 (1)题目如下: alert(a) var a=1 function a(){ alert(a) } 好多 ...
- 各大互联网公司前端面试题(js)
对于巩固复习js更是大有裨益. 初级Javascript: 1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型 ...
- 前端面试题 -- JS篇
前端面试题 -- JS篇 类型 1.js中有哪些数据类型,并解释清楚原始数据类型和引用数据类型 js中共有null,undefined, string,number,boolean,object六种数 ...
- 前端面试题总结(二)CSS篇
前端面试题总结(二)CSS篇 一.link和@import的区别? link属于HTML标签,可以引入出css以外的事务,如RSS,而@import是css提供的,只能加载css文件. link会在页 ...
随机推荐
- 操作系统 - 死锁(Deadlock)的概述、条件、对策
资源 可抢占资源(preemptable resource)可以从拥有它的进程中抢占而不会产生任何副作用,存储器就是一类可抢占的资源.可抢占资源有时有潜在的死锁危险,通常可以通过在进程之间重新分配资源 ...
- ffdshow 源代码分析 2: 位图覆盖滤镜(对话框部分Dialog)
===================================================== ffdshow源代码分析系列文章列表: ffdshow 源代码分析 1: 整体结构 ffds ...
- 万水千山ABP - 单租户时,成功保存数据后,数据不显示
问题描述: ABP 禁用了多租户,在编辑一个实体记录后,能成功地保存数据,但数据列表中看不到这条记录.打开数据表查看,发现该实体记录的 TenantId 字段值成了 Null , 而不是预期的默认租户 ...
- Hibernate的二级缓存策略
Hibernate的二级缓存策略的一般过程如下: 1) 条件查询的时候,总是发出一条select * from table_name where …. (选择所有字段)这样的SQL语句查询数据库,一次 ...
- 全面解读Java NIO工作原理(4)
全面解读Java NIO工作原理(4) 2011-12-14 10:31 Rollen Holt Rollen Holt的博客 我要评论(0) 字号:T | T JDK 1.4 中引入的新输入输出 ( ...
- 初识Java——循环语句
循环语句就是在一定条件下反复执行某一个操作.具体有三种方法实现: 1while循环语句 while语句也称作条件判断语句,它的循环方式为利用一个条件来控制是否要反复执行.语法如下: while(条件语 ...
- Mac 电脑前端环境配置
恍惚间,好久没有在外面写过随笔了.在阿里的那两年,学到了许多,也成长了许多,认识了很多可爱的人,也明白了很多社会的事.最后种种艰难抉择,我来到了美团成都,一个贫穷落后但更自由开放弹性的地方.已经误以为 ...
- Linux 下常用的Shell 命令
英文原文链接:https://www.lopezferrando.com/30-interesting-shell-commands/ 1. 监控命令(每2秒运行一次) watch "ls ...
- springMVC中添加restful 风格
RESTful架构:是一种设计的风格,并不是标准,只是提供了一组设计原则和约束条件,也是目前比较流行的一种互联网软件架构.它结构清晰.符合标准.易于理解.扩展方便,所以正得到越来越多网站的采用. 关于 ...
- Python中urllib.urlencode中文字符的一个问题
Django项目在访问Restful service时调用urllib.urlencode编码中文字符串时碰到下面这个错误. v = quote_plus(str(v)) UnicodeEncodeE ...