题目概览
- 新窗口打开链接的方法是什么
- IE(6/7/8/9/10/11/Edge)下的hack写法分别有哪些
- js如何实现继承
题目解答
新窗口打开链接的方法是什么
-
a标签加target属性
<a href="www.xxx.com" target="_blank">open</a> -
用js在新窗口打开链接
window.open('www.xxx.com') -
设置全站链接都在新窗口打开
<base target="_blank">
IE(6/7/8/9/10/11/Edge)下的hack写法分别有哪些
_ IE6
* IE6/7
!important IE7/Firefox
*+ IE7
9 IE6/7/8
IE8
/* 条件hack */
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]--> IE7以下版本
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]--> IE7
<!--[if IE 8]> <html class="no-js lt-ie9"><![endif]--> IE8
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]--> IE8以上
js如何实现继承
-
通过构造函数实现继承：通过这种方式，只能继承定义在父类构造函数内的属性与方法，定义在prototype原型对象内的属性与方法则无法继承，因此对其改进
function Parent1 () { this.name= '111'; } function Child1 () { Parent1.call(this); this.type='222'; } -
通过原型对象进行继承：通过这种方式，则既能继承构造函数内的属性与方法，也能继承原型链上的属性与方法。但是，由于令其原型对象指向父类的一个实例对象，使得所有子类的实例对象所访问到的属性指向同一个对象，所以会出现改变一个子类实例对象的父类中的属性，另一个子类对象的属性也跟着改变。因此我们有下一个方法来改进
function Parent2 () { this.name= '111'; } function Child2 () { this.type='222'; } Child2.prototype = new Parent2(); -
组合方法进行继承：但是这种方法，使得父类的构造函数执行了两次，为了减少父类的构造函数的不必要的多次执行，如下修改代码
function Parent3 () { this.name= '111'; } function Child3 () { Parent3.call(this); this.type='222'; } Child3.prototype = new Parent3(); -
组合方法进行继承优化：这样解决了前面提到的问题，但是这样简单粗暴的继承，使子类的原型对象指向了父类的原型对象，会导致当子类实例对象通过constructor属性获取其构造函数时，获得的是父类的构造函数（因为constructor属性在prototype属性中被继承），因此再进行优化：
function Parent4 () { this.name= '111'; } function Child4 () { Parent4.call(this); this.type='222'; } Child4.prototype = Parent4.prototye; -
组合方法进行继承优化2：由于Object.create()这个api的特性，父类的原型对象会继承在子类的原型对象的原型对象上，实现了子类原型对象与父类原型对象的隔离，这时再给子类的原型对象的constructor属性赋值。为什么直接在第四种方式的后面直接赋值呢？因为这是子类与父类的原型对象指向同一个对象，修改属性会同时修改子类与父类的原型对象。
function Parent5 () { this.name= '111'; } function Child5 () { Parent5.call(this); this.type='222'; } Child5.prototype = Object.create(Parent5.prototype); Child5.prototype.constructor = Child5; -
扩展：JavaScript 使用基于原型链的继承。访问一个对象的属性时若该属性在对象上不存在，则会沿原型链向下搜寻每个原型对象。每个构造器都拥有 prototype 属性，代表该构造器的原型对象，初始为一个 Object 实例。所有用此构造器 new 出的对象都可以访问该对象的属性。如果一个构造器 A 的 prototype 属性是另一个构造器 B 的实例，那么 B 的原型链会被接到 A 上，此时我们就说 A 继承了 B，A 实例可以访问所有 B 原型链上的属性
function Foo(bar) { this.bar = bar } Foo.prototype.baz = 'test' let qux = new Foo('hello') qux.bar // => 对象本身的属性：'hello' qux.baz // => 对象原型链上 Foo 的原型属性：'test' // qux 的原型链：(qux ->) Foo.prototype -> Object.prototype function Foo2() {} Foo2.prototype.baz2 ='test2' Foo2.prototype = new Foo() // 将 Foo 的原型链接到 Foo2 上。Foo 来自上一个例子 qux = new Foo2() qux.baz // 原型链上 Foo 的原型属性：'test' qux.baz2 // 原型链上 Foo2 的原型属性：'test2' // qux 的原型链：(qux ->) Foo2.prototype -> Foo.prototype -> Object.prototype -
ES6：js常采用寄生组合式继承,每个对象特有的属性在构造函数重新创建,每个对象共用的属性方法写在原型对象上,利用每个对象的_proto_属性沿着原型链往原型找与键对应的属性,找到则返回对应的属性；ES6中增加class语法糖,本质上没什么区别,但是统一了ES6之前五花八门的继承写法
class Person{ constructor(name){ this.name = name; } sayHi(){ console.log(`my name is ${this.name}`); } } class Man extends Person{ constructor(name,age){ super(name); this.age = age; } sayAge(){ console.log(`I am ${this.name}, I am ${this.age} years old`); } } let p_man = new Man('tom',19); p_man.sayAge(); // I am tom, I am 19 years old p_man.sayHi(); // my name is tom