1、[HTML]300 毫秒点击延迟问题？
2、[CSS]值和单位px、em、rem、vw/vh？
3、[JS]JS 如何实现继承？
1、300 毫秒点击延迟问题
产生原因：
在移动端，用这个300ms的时间，去判断用户的操作是要打开连接还是进行双击操作，比如双击缩放。
最早前的网页只给大屏幕设计，苹果在发布首款ihone的时候做做了一些约定，针对这些小屏幕浏览站点的问题，其他移动浏览器都相继复制了多数约定，就包括了双击缩放。
随着移动端的发展，用户对于体验的要求越来越高，这个300ms带来的卡顿就让人难以接受。
解决方案：
禁止缩放。
<meta>标签操作，必须完全禁止用缩放；
initial-scale=1.0, maximum-scale=1.0, user-scalable=0;
非适配移动端的界面，图片或者一段字体很小的文字也无法实现放大查看了。
width=device-width;
Chrome32开始，默认width=device-width的时候禁止缩放页面。
用了这个的页面一般是为移动端设计的页面，默认宽度从980变成了移动端刚刚好的宽度，比如iphone上的300+，消除了在该站点上可能潜在的双击缩放需求。
2、值和单位px、em、rem、vw/vh、vmax/vmin
px
绝对长度单位，像素pixel的缩写，图像显示的基本单元，页面的常用单位，是相对于浏览器屏幕分辨率而言的。
em
相对长度单位，是相对于当前对象内字体大小（父级font-size，未设置时参考浏览器默认字体大小）而言的的。
rem
相对长度单位，css3的新单位，是相对于html根元素字体大小（html的font-size，未设置参考浏览器默认字体大小）而言的。
ie8及之前的版本不可用。
vw/vh、vmax/vmin
基于视口（viewport）的单位；
vw相对于视口的宽度，1vw= 1*(视口宽度/100)；
vh相对于视口的高度，1vh= 1*(视口高度/100)；
vmin：1vw和1vh中较小的那个；
vmax：1vw和1vh中较大的那个。
3、JS 如何实现继承？
JavaScript主要通过原型链来实现继承，通常继承意味着复制，然而JavaScript默认不会复制对象属性，只是在两个对象之间创建一个关联（类似指针），从而达到可以访问另一个对象的属性和方法。
继承是面向对象技术中的一种概念，与多态、封装共为面向对象的三个基本特征。
继承可以使子类具有父类的属性和方法或者重新定义、追加属性和方法等。
继承是类与类之间的关系，不是对象与对象之间的关系。
构造函数、实例：
构造函数是用来创建对象的函数，也属于函数，区别在于调用方式不同。
通过new操作符来创建它的实例对象的就是构造函数，没有的就是普通函数。
function Funname(){}
var fun1 = new Funname()
fun1这里的Funname是构造函数，fun1叫做Funname的实例。
原型对象
函数有一个prototype属性，指向原型对象。
当new了一个新的对象的时候（上述fun1），不做别的操作，可以直接访问原型对象的（funname里面的）属性和方法。
原型对象也有它自己的__proto__。
构造函数被声明时，原型对象也一同完成创建，然后挂载到构造函数的prototype属性上。
构造函数，原型对象和实例的关系
函数的prototype->原型对象
原型对象的constructor->函数
实例对象的protoptype->原型对象（允许实例通过该prototype属性访问原型对象中的属性和方法）
sequenceDiagram
Funname（构造函数）->>Funname.prototype（实例原型）: prototype
Funname.prototype（实例原型）->>Funname（构造函数）: constructor
Funname（构造函数）->>fun1:
fun1->>Funname.prototype（实例原型）: __proto__
Funname.prototype（实例原型）->>Object.prototype: __proto__
Object.prototype->>null: __proto__
Object.prototype->>Object(): constructor
Object()->>Object.prototype: rototype
原型链
上一篇写的原型链，理解了这个就能更好的理解继承问题，也是继承的主要思路。
（1）、原型链继承
让对象实例通过原型链的方法串联起来，当访问目标对象的某一属性是，能顺着原型链进行查找，从而达到类似继承的效果。
将子类子类与父类的原型联系起来（原本父类原型的constructor指向父类的）
//父类
function Parent() {}
//子类
function Child() {}
//继承父类
Child.prototype = new Parent()
//改变constructor指向
Child.prototype.constructor = Child
sequenceDiagram
子类原型prototype->>父类实例new Parent(): prototype
父类实例new Parent()->>父类原型prototype: prototype
父类原型prototype->>子类原型prototype: constructor
优点：
父类方法可以复用。
缺点：
（1）、引用关系，父类的所有引用属性会被所有子类共享，多个子类的话，一个改了，别的都被改了，目标只有一个；
（2）、子类实例不能给父类传值。
（2）、构造继承
在子类构造函数中调用父类构造函数，可以在子类构造函数中使用call()和apply()方法。
function Parent(value){
this.value = value;
}
function Child(value) {
//继承自Parent，并可传参
Parent.call(this,value)
}
通过使用call和apply方法，Parent构造函数在为Child的实例创建的新对象的上下文执行了，相当于新的Child实例对象上运行了Parent()函数中的所有初始化代码，导致每个实例都有自己的parentxxx属性。
优点：
（1）、子类构造函数可以向父级传参；
（2）、父级的引用类型不共享。
缺点：子类不能访问父类原型上（Parent.prototype）定义的方法，因此所有方法属性都写在构造函数中，每次创建实例都会被初始化。
（3）、组合继承
使用了call在子类构造函数中调用父类构造函数；
综合了原型链继承和构造函数继承的有点。
function Parent(value) {
this.value = value;
}
Parent.prototype.getValue = function() {
console.log(this.value);
}
function Child(value) {
//继承父类属性
Parent.call(this, value)
}
//继承父类方法
Child.prototype = new Parent();
优点：
（1）、父类方法可以复用；
（2）、可以在子构造函数中向父级构造函数中传参；
（3）、解决了原型链继承中的缺点，引用属性不会被共享。
缺点：父级调用了两次（创造子类原型和实例的时候都会被调用一次），初始化了两次，子类原型上会存在父类实例属性。
（4）、原型式继承
对参数对象的一种浅复制
let Parent = {};
function returnParent(obj) {
function Fun() {}
Fun.property = obj;
return new Fun()
}
let child = returnParent(Parent)
优点：父类方法可复用。
缺点：
（1）、父类的引用会被所有子类所共享
（2）、子类实例不能向父类传值
（5）、寄生式继承
使用原型式继承对一个目标对象进行浅复制，增强这个复制的内容
let Parent = {};
function returnParent(obj) {
function Fun() {
Fun.property = obj;
}
}
//再次复制
function returnParentAga(obj) {
let clone = returnParent(obj);
clone.getValue = function() {}
return clone;
}
let child = returnParentAga(Parent)
（6）、寄生组合继承
let Parent = {}
function returnParent(obj) {
function Fun() {};
Fun.prototype = obj;
return new Fun();
}
function createParentProto(child, parent) {
// 复制prototype
let proto = returnParent(parent.prototype)
// 链接child
proto.constructor = child
//赋值
child.prototype = protp
}
functoin Parent () {};
function Child() {
Parent.call(this)
}
createParentProto(Child, Parent)
let child = new Child(){}
也可根据Object.create(Parent.prototype)创建一个新的原型对象
function Parent() {}
Parent.prototype.getValue = function() {}
function Child(value) {
Parent.call(this)
}
Child.prototype = Object.create(Parent.prototype, {
constructor: {
value: Child,
enumerable: false, // 不可枚举该属性
writable: true, // 可改写该属性
configurable: true // 可用 delete 删除该属性
}
})
优点：
（1）、父级方法可以复用；
（2）、只调用一次父级构造函数；
（3）、子级可以向父级传参；
（4）、父级的引用属性不会被共享。
继承关系判断：
（1）、instanceof
xxx是不是xxx的实例。
通过原型链查找来判断继承关系，因此只能用来判断引用类型，对基本类型无效。
（2）、Object.prototype.isPrototypeOf(obj)
还可以利用Object.prototype.isPrototypeOf来间接判断继承关系，该方法用于判断一个对象是否存在于另一个对象的原型链上。
扫一扫
646
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
