iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 5
0
Modern Web

30天每日死磕面试题3+1系列 第 5

DAY 5 JS中如何实现继承?

HTML

如何设置在新窗口打开链接?怎么设置全站在新窗口打开链接?

①单个链接时,使用中的"target"属性设置新窗口跳转
例如:
②在中设置
例:

<head>
    <base target="_blank">
</head>

③可以使用JS实现此功能:

window.open(URL,name,specs,replace)

CSS

font-style有有Italic和oblique两个属性,有什么区别?

italic和oblique都是向右倾斜的文字, 但区别在于Italic是指斜体字,而Oblique是倾斜的文字,对于没有斜体的字体应该使用Oblique属性值来实现倾斜的文字效果.且文字具有斜体,正常体的属性,但不是每种文字都具有斜体的属性,所以当希望这些没有倾斜属性的文字产生倾斜的效果,就要使用oblique的属性,使其文字倾斜,产生italic的效果

JS

举例说明 JS如何实现继承?

JS实现继承的方式有以下几种:

1.通过构造函数实现继承:
function Parent1 () {
this.name= '111';
}
function Child1 () {
Parent1.call(this);
this.type='222';
}
通过这种方式,只能继承定义在父类构造函数内的属性与方法,定义在prototype原型对象内的属性与方法则无法继承,因此对其改进。

2.通过原型对象进行继承:
function Parent2 () {
this.name= '111';
}
function Child2 () {
this.type='222';
}
Child2.prototype = new Parent2();
通过这种方式,则既能继承构造函数内的属性与方法,也能继承原型链上的属性与方法。但是,由于令其原型对象指向父类的一个实例对象,使得所有子类的实例对象所访问到的属性指向同一个对象,所以会出现改变一个子类实例对象的父类中的属性,另一个子类对象的属性也跟着改变。因此我们有下一个方法来改进:

3.组合方法进行继承:
function Parent3 () {
this.name= '111';
}
function Child3 () {
Parent3.call(this);
this.type='222';
}
Child3.prototype = new Parent3();
但是这种方法,使得父类的构造函数执行了两次,为了减少父类的构造函数的不必要的多次执行,如下修改代码。

4.组合方法进行继承优化:
function Parent4 () {
this.name= '111';
}
function Child4 () {
Parent4.call(this);
this.type='222';
}
Child4.prototype = Parent4.prototye;
这样解决了前面提到的问题,但是这样简单粗暴的继承,使子类的原型对象指向了父类的原型对象,会导致当子类实例对象通过constructor属性获取其构造函数时,获得的是父类的构造函数(因为constructor属性在prototype属性中被继承),因此再进行优化:

5.组合方法进行继承优化2:
function Parent5 () {
this.name= '111';
}
function Child5 () {
Parent5.call(this);
this.type='222';
}
Child5.prototype = Object.create(Parent5.prototype);
Child5.prototype.constructor = Child5;
由于Object.create()这个api的特性,父类的原型对象会继承在子类的原型对象的原型对象上,实现了子类原型对象与父类原型对象的隔离,这时再给子类的原型对象的constructor属性赋值。为什么直接在第四种方式的后面直接赋值呢?因为这是子类与父类的原型对象指向同一个对象,修改属性会同时修改子类与父类的原型对象。

JavaScript 基于原型链实现的继承,简单来说就是通过对象的__proto__实现的向上查找。
比如你从未定义过toSing()方法,但是你却可以在任何地方使用它,原因就是当你使用xx.toString()时,他会先在自身查找看看没有这个方法,如果没有就根据__proto__寻找他的原型对象,看看他的原型对象上有没有....知道找到为止。


今天发布的文比较晚,因为昨天实在是太累而且今天就要上课了,所以气的比较晚,洗漱一下就差不多了,昨天晚上也没有提前准备,所以没能在七点前发布,实在是非常抱歉。


上一篇
DAY 4: 面试题第四天
下一篇
DAY 6 :锚点的反复纵跳秘籍?如何实现一个全屏的功能?
系列文
30天每日死磕面试题3+19
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言