JavaScript 进阶之路：探索高级特性和最佳实践
面向对象的三大特征
- 封装
- 继承
- 多态
构造函数
- 什么是构造函数
通过new关键字调用一个函数的时候，这个函数就是构造函数。
- 构造函数和普通函数的区别
- 调用方式不同
-
- 普通函数只用函数名调用
- 构造函数通过new关键字调用
- 返回值不同
-
- 普通函数的返回值是函数体内return的结果
- 构造函数的返回值是new关键字生成的对象
JS Prototype原型对象
- 所有的函数都有一个原型对象Prototype，并且只有函数才拥有原型对象Prototype。
- 原型对象其实也是一个对象。
- 函数原型对象的构造函数，就是这个函数本身。
实例化对象
- 通过new关键字从函数中创建对象obj，可以把obj称为函数的实例化对象。
- 通过字面量方式创建的对象可以被称之为Object的实例化对象。
- 实例化对象和普通对象是没有任何区别的。
__Proto__
每个对象都拥有一个属性__proto__，这是浏览器实现的属性。通过这个属性可以访问构造函数constructor上的原型对象prototype。
new关键字
- 使用new关键字从函数上重新创建一个新的对象
- new关键字可以进行如下操作：
-
- 创建一个空的对象；
- 将这个空对象构造函数constructor设置为函数；
- 可以改变函数中this指向。
原型链（面试）
- 在JS中，几乎所有的对象都是Object类型的实例。它们都会从Object.prototype继承属性和方法。
- 原型对象prototype一级一级的向上查询属性或者方法，直到找到为止，这样的过程被称为原型链。
对象封装
- 对象封装方法：
-
- 构造函数模式
- 构造函数+原型模式
闭包（面试）
- 闭包让你可以在一个内层函数中访问其外层函数的作用域。
- 闭包形成的原因：
只要一个函数访问了外部作用域的变量，就会形成闭包。
- 闭包作用：
-
- 闭包可以延长作用域链
- 优点
-
-
- 实现封装，防止变量跑到外层作用域中，发生命名冲突。
- 防止内存泄漏
-
-
- 缺点
-
-
- 性能消耗比较大，由于闭包引用另一个函数的变量，会导致外层函数的变量无法被销毁。
- 闭包要比一般的函数消耗跟多的内存。
- 使用闭包，会设计跨作用域访问，每次访问都会导致性能的损失。
-
懒加载（面试）
1.什么是懒加载？
懒加载也就是延迟加载。
当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。
2.为什么要使用懒加载？
很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页面载入就一次性加载完毕。估计大家都会等到黄花变成黄花菜了。
3.懒加载的原理是什么？
页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。
懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把正真的路径存在元素的“data-url”（这个名字起个自己认识好记的就行）属性里，要用的时候就取出来，再设置；
4.懒加载的实现步骤？
1。首先，不要将图片地址放到src属性中，而是放到其它属性(data-original)中。
2。页面加载完成后，根据scrollTop判断图片是否在用户的视野内，如果在，则将data-original属性中的值取出存放到src属性中。
3。在滚动事件中重复判断图片是否进入视野，如果进入，则将data-original属性中的值取出存放到src属性中。
5.懒加载的优点是什么？
页面加载速度快、可以减轻服务器的压力、节约了流量,用户体验好
预加载（面试）
1.什么是预加载？
提前加载图片，当用户需要查看时可直接从本地缓存中渲染
2.为什么要使用预加载？
图片预先加载到浏览器中，访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。
3.实现预加载的方法有哪些？
方法一：用CSS和JavaScript实现预加载
方法二：仅使用JavaScript实现预加载
方法三：使用Ajax实现预加载
详见：http://web.jobbole.com/86785/
3、懒加载和预加载的对比
1)概念：
懒加载也叫延迟加载：JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。
预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
2)区别：
两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。
3)懒加载的意义及实现方式有：
意义：
懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。
实现方式：
1.第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟.
2.第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。
3.第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。
4)预加载的意义及实现方式有：
意义:
预加载可以说是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。
实现方式：
实现预载的方法非常多，比如：用CSS和JavaScript实现预加载；仅使用JavaScript实现预加载；使用Ajax实现预加载。
常用的是new Image();设置其src来实现预载，再使用onload方法回调预载完成事件。只要浏览器把图片下载到本地，同样的src就会使用缓存，这是最基本也是最实用的预载方法。当Image下载完图片头后，会得到宽和高，因此可以在预载前得到图片的大小(方法是用记时器轮循宽高变化)。
自执行函数
什么是自执行函数？
可以立即执行的函数 而不需要调用
创建自执行函数
(function 函数名() {})()
!function 函数名() {}()
+function 函数名() {}()
-function 函数名() {}()
~function 函数名() {}()
void function 函数名() {}()
new function 函数名() {}()
自执行函数通常都是定义之后立即执行的 以后都不会再被调用，所以自执行函数在声明的时候都可以省略函数名，因此自执行函数又叫匿名函数
自执行函数传参
自执行函数传参跟普通函数相同
格式：
(function(形参1,形参2,...) {
// 执行代码
})(实参1,实参2,...)自执行函数作用
自执行函数可以用来保存变量的作用域 防止污染全局变量
继承
js中继承是通过原型实现
使用call方法实现继承
call方法实现继承的特点：
- call是通过调用需要继承的构造函数，调用过程改变this指向来实现的
- call是不可以继承父对象原型中的属性和方法
- call把继承的属性和方法写入对象自身
call与apply区别
这两个方法都可以实现继承
区别：
- call如果传递多个参数时候 参数可以分开写 call(this, 参数1, 参数2,...)
- apply如果传递多个参数时候 参数需要写成数组形式 apply(this, [参数1, 参数2,...])
bind
bind(this,arg1,arg2...) 第一个参数是this 后续的参数可以作为函数的参数传入 添加了bind以后 意味着新创建了一个函数 并且把this 传入到这个函数 不会立即执行 只有被调用才会执行
区别
call apply bind 三个都是改变this指向的
call apply bind 三个的第一个参数都是this 或者null 不能没有参数
call apply bind 三个 都可以通过后面的参数 给函数传递参数
apply 的第二个参数是一个数组
call 和 apply 都是立即执行 bind只是绑定函数的this 需要手动触发使用原型链继承
特点：
- 原型继承是靠prototype的指向来实现
- 原型继承可以继承父对象原型中的属性和方法
- 原型继承继承的属性和方法不在对象内部 在原型链上