第一部分 基础知识
面向对象
JavaScript 没有提供传统面向对象语言中的类式继承,而是通过原型委托的方式来实现对象与对象之间的继承
JavaScript 是动态类型语言:
- 静态类型:在编译时便已确定变量的类型。 特点:可靠,但繁琐
- 动态类型:变量类型要到程序运行的时候,待变量被赋予某个值之后,才会具有某种类型。 特点:简洁灵活,但易出错
鸭子类型
“如果一只鸡走起路来像鸭子,叫起来也是鸭子,那么它就是鸭子。”
鸭子类型关注 HAS-A 而非 IS-A
IS-A、HAS-A和IS-LIKE-A之间的关系
IS-A: 这种事物(绵羊)是那种事物(羊)中的一个种类
HAS-A: 这种事物(羊毛)隶属于那种事物(绵羊),是它的一个部分、部件
IS-LIKE-A: 如果继承过程中,仅仅是覆盖了父类中的方法,则为is-a关系,如果有新增的方法,则为is-like-a关系
面向对象的三大特性:
- 多态: 将“做什么”与“怎么做”分离,静态类型语言通过抽象类和接口来实现,JS 没有约束,比较灵活
- 封装:
- 继承:
this、call、apply
this
this指向
js中的this总是指向一个对象,而具体指向哪个对象,是在运行时基于函数的执行环境动态绑定的,而非函数被声明时的环境
常用的this指向场景
- 作为对象的方法调用 ————指向该对象
- 作为普通函数调用 ————window
- 构造器调用 ————该对象
- Function.prototype.call 或 Function.prototype.apply 调用
示例
- 作为对象的方法调用
var obj = {
name: '木木',
getThis: function() {
console.log(this === obj)
return this.name
}
}
obj.getThis() // true "木木"
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
- 作为普通函数调用
当函数不作为对象的属性被调用时,也就是作为普通函数的方式,此时的this总是指向全局对象,在浏览器的js里,这个全局对象时window对象
// case 1
var name = '全局名称'
function getThis() {
return this.name
}
getThis() // "全局名称"
// case 2
var name = '全局名称-木子'
var obj = {
name: '木木',
getThis: function() {
console.log(this === obj)
return this.name
}
}
var getName = obj.getThis // getThis方法不作为对象的属性被调用
getName() // "全局名称-木子"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
- 作为构造器调用
js中没有类,但可以从构造器中创建对象,同时提供new运行符,使得构造器看起来像一个类
当使用new运算符调用函数时,该函数返回一个对象,通常情况下,构造器里的this就指向返回的这个对象
示例
function MyClass() {
this.name = '木子李'
}
var obj = new MyClass()
console.log(obj.name) // "木子李"
1
2
3
4
5
2
3
4
5
使用new调用构造函数时,还需注意,如果构造器显示的返回了一个Object类型(其他类型,无影响)的对象,那么此次运算结果最终会返回这个对象
function MyClass() {
this.name = '木子李'
return {
name_two: '林夕梦'
}
}
var obj = new MyClass()
console.log(obj.name) // undefined
console.log(obj.name_two) // "林夕梦"
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
call和apply
call 和 apply 常见的用途是改变函数内部的 this 指向,第一个参数为你要传入的对象,传入后函数的this就指向了这个对象,后面的参数为函数传递参数值,两者区别在于传参的形式不同
- fun.call(thisobj,arg1,arg2) ;当后面参数个数确定时用call,参数之间用逗号连接
- fun.apply(thisobj,[arg1,arg2]);当后面参数个数不确定时用apply,参数通过
数组
形式输入
当使用 call 或者 apply 的时候,如果我们传入的第一个参数为 null,函数体内的 this 会指 向默认的宿主对象,在浏览器中则是 window,严格模式下,this还是为null
示例
var getName = function() {
console.log(this.name)
}
var obj1 = {
name: 'obj1-name'
}
getName() // undefined
getName.call(obj1) // 'obj1-name'
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
闭包和高阶函数
闭包
TODO
待补充
高阶函数
TODO
待补充