一省：HTML
12. img标签的alt和title有什么不同？
1.alt：
- 当图片加载不出来的时候，就会在图片未显示的地方出现一段 alt 设置的属性内容。
- 浏览器的搜索引擎可以通过 alt 属性的文字描述来获取图片。
2.title： - title是鼠标放在图片上面时显示的文字，title 是对图片的描述和进一步的说明。
二省： CSS
12. 媒体查询是什么？
css中媒体查询使用@media实现，@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。如：
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
三省：JavaScript
12. 原型链和继承的六种实现方式
原型链: 对象的原型对象也有自己的原型(__ptoto__)，即
function Person(){
}
var person = new Person()
console.log(person.__proto__);//对象的原型
console.log(person.__proto__.__proto__);//对象原型的原型
...
相应的，原型的原型还有原型，直到原型指向Object.prototype，而Object的原型指向null，这种原型的链条就叫原型链
console.log(Object.prototype.__proto__)//null
有一个老图，可以参考：
继承： 子类继承父类的特征和行为，使得子类具有父类的属性和方法。在js中，有以下6种继承方式：
1. 原型链继承
// 父类： 公共属性和方法
function Father(name) {
this.name = name || "zosi"
this.arr = [1]
}
Father.prototype.say = function(){
console.log(this.name + " say hello world!");
}
// 子类： 独有属性和方法
function Child(height) {
this.height = height || 180
}
//继承父类
Child.prototype = new Father()
Child.prototype.run = function() {
console.log(this.name + " running! " + this.height);
}
var child1 = new Child("lemon", 170)
var child2 = new Child(160)
child1.say();//zosi say hello world!
child2.run();//zosi running! 160
child1.arr.push(2)
console.log(child1.name, child2.arr, child1, child2);//zosi [1, 2] Child {height: 'lemon'} Child {height: 160}
缺点：
- 打印子类实例时，继承的属性看不到
- 创建子类实例时，无法传父类的参数
- 子类实例会共享父类的引用类型的参数
2. 借用构造函数继承
// 父类： 公共属性和方法
function Father(name) {
this.name = name || "zosi"
this.arr = [1]
}
Father.prototype.say = function(){
console.log(this.name + " say hello world!");
}
// 子类： 独有属性和方法
function Child(name, height) {
//继承父类
Father.call(this, name)
this.height = height || 180
}
Child.prototype.run = function() {
console.log(this.name + " running! " + this.height);
}
var child1 = new Child("lemon")
var child2 = new Child("Jack", 160)
// child1.say();//报错
child2.run();//Jack running! 160
child1.arr.push(2)
console.log(child1.arr, child2.arr, child1, child2);//[1, 2] [1] Child {name: 'lemon', arr: Array(2), height: 180} Child {name: 'Jack', arr: Array(1), height: 160}
虽然解决了原型链继承的缺点，但是它本身也有缺点：
- 子类无法访问父类原型的方法
3. 组合式继承
// 父类： 公共属性和方法
function Father(name) {
this.name = name || "zosi"
this.arr = [1]
}
Father.prototype.say = function(){
console.log(this.name + " say hello world!");
}
// 子类： 独有属性和方法
function Child(name, height) {
//继承属性
Father.call(this, name)
this.height = height || 180
}
// 继承方法
Child.prototype = new Father()
Child.prototype.run = function() {
console.log(this.name + " running! " + this.height);
}
var child1 = new Child("lemon")
var child2 = new Child("Jack", 160)
child1.say();//lemon say hello world!
child2.run();//Jack running! 160
child1.arr.push(2)
console.log(child1.arr, child2.arr, child1, child2);//[1, 2] [1] Child {name: 'lemon', arr: Array(2), height: 180} Child {name: 'Jack', arr: Array(1), height: 160}
组合继承综合了原型链和借用构造函数。缺点：
- 调用两次父类构造函数。
4. 原型式继承
var person = {
name: "Jack",
friends: ["Marry"]
}
// 方法一：作者-> Douglas Crockford - 2006
function object(o){
function F(){
}
F.prototype = o
return new F()
}//object()对传入的对象进行了一次浅拷贝
var p1 = object(person)
p1.friends.push("Jane")
var p2 = object(person)
p2.friends.push("Larry")
console.log(p1.friends);//['Marry', 'Jane', 'Larry']
// 方法二：Object.setPrototypeOf()
function creatObject(o) {
let newObj = {
}
Object.setPrototypeOf(newObj, o)
return newObj
}
var p1 = creatObject(person)
p1.friends.push("Bob")
var p2 = creatObject(person)
p2.friends.push("Chansen")
console.log(p1.friends);//['Marry', 'Bob', 'Chansen']
// 方法三：ES5 -> Object.create() 接受两个参数，第二个参数可以添加或者覆盖属性
var p1 = Object.create(person)
p1.friends.push("Sale")
var p2 = Object.create(person, {
name: {
value: "Mieba"
}
})
p2.friends.push("Jordan")
console.log(p1.friends, p2.name);// ['Marry', 'Sale', 'Jordan'] 'Mieba'
原型式继承非常适合不需要单独创建构造函数的场景，但是缺点也很明显：
- 无法传参
- 引用类型会在实例间共享
5. 寄生式继承
var person = {
name: "Jack",
friends: ["Marry"],
run: function() {
console.log("run run run!");
}
}
function createPerson(obj){
let p = Object.create(obj)
p.say = function() {
console.log("say hello world!");
}
return p
}
var p1 = createPerson(person)
p1.run();//run run run!
p1.friends.push("Jerry")
var p2 = createPerson(person)
p2.say();//say hello world!
console.log(p1.name, p2.friends);//Jack ['Marry', 'Jerry']
寄生式继承缺点与原型式继承一致。
6. 寄生组合式继承(推荐)
//封装继承方法
function inheritPrototype(subType, superType) {
let prototype = Object.create(superType.prototype);//创建对象
prototype.constructor = subType;//增强对象
subType.prototype = prototype;//赋值对象
}
// 父类： 公共属性和方法
function Father(name) {
this.name = name || "zosi"
this.arr = [1]
}
Father.prototype.say = function(){
console.log(this.name + " say hello world!");
}
// 子类： 独有属性和方法
function Child(name, height) {
//继承属性
Father.call(this, name)
this.height = height || 180
}
// 继承方法
inheritPrototype(Child, Father)
Child.prototype.run = function() {
console.log(this.name + " running! " + this.height);
}
var child1 = new Child("lemon")
var child2 = new Child("Jack", 160)
child1.say();//lemon say hello world!
child2.run();//Jack running! 160
child1.arr.push(2)
console.log(child1.arr, child2.arr, child1, child2);// [1, 2] [1] Child {name: 'lemon', arr: Array(2), height: 180} Child {name: 'Jack', arr: Array(1), height: 160}
继承的最佳模式。
