JavaScript高级之函数高级

a)原型与原型链

i.原型(prototype)

1.函数的prototype属性(图)

*每个函数都有一个prototype属性, 它默认指向一个Object空对象(即称为: 原型对象)

*原型对象中有一个属性constructor,它指向函数对象

2.给原型对象添加属性(一般都是方法)

*作用: 函数的所有实例对象自动拥有原型中的属性(方法)

ii.显示原型与隐式原型

1.每个函数function都有一个prototype，即显式原型

2.每个实例对象都有一个__proto__，可称为隐式原型

3.对象的隐式原型的值为其对应构造函数的显式原型的值

4.内存结构(图)

5.总结:

*函数的prototype属性: 在定义函数时自动添加的, 默认值是一个空Object对象

*对象的__proto__属性: 创建对象时自动添加的, 默认值为构造函数的prototype属性值

*程序员能直接操作显式原型, 但不能直接操作隐式原型(ES6之前)

iii.原型链

1.原型链(图解)

*访问一个对象的属性时，

*先在自身属性中查找，找到返回

*如果没有, 再沿着__proto__这条链向上查找, 找到返回

*如果最终没找到, 返回undefined

*别名: 隐式原型链

*作用: 查找对象的属性(方法)

2.构造函数/原型/实体对象的关系(图解)

3.构造函数/原型/实体对象的关系2(图解)

4.原型继承

构造函数的实例对象自动拥有构造函数原型对象的属性(方法)

利用的就是原型链

5.原型属性问题

ü读取对象的属性值时: 会自动到原型链中查找

ü设置对象的属性值时: 不会查找原型链, 如果当前对象中没有此属性, 直接添加此属性并设置其值

ü方法一般定义在原型中, 属性一般通过构造函数定义在对象本身上

iv.探索instanceof

1. instanceof是如何判断的?

*表达式: Ainstanceof B

*如果B函数的显式原型对象在A对象的原型链上, 返回true, 否则返回false

2. Function是通过new自己产生的实例

//案例1

function Foo() { }

var f1 = new Foo();

console.log(f1 instanceof Foo);

console.log(f1 instanceof Object);

//案例2

console.log(Object instanceofFunction)

console.log(Object instanceofObject)

console.log(Function instanceofObject)

console.log(Function instanceofFunction)

function Foo() {}

console.log(Object instanceof Foo);

b)执行上下文与执行上下文栈

i.变量提升与函数提升

1.变量提升

*通过var定义(声明)的变量, 在定义语句之前就可以访问到

*值: undefined

2.函数提升

*通过function声明的函数, 在之前就可以直接调用

*值: 函数定义(对象)

ii.执行上下文

1.代码分类(位置)

*全局代码

*函数代码

2.全局执行上下文

*在执行全局代码前将window确定为全局执行上下文

*对全局数据进行预处理

* var定义的全局变量==>undefined, 添加为window的属性

* function声明的全局函数==>赋值(fun), 添加为window的方法

* this==>赋值(window)

*开始执行全局代码

3.函数执行上下文

*在调用函数, 准备执行函数体之前, 创建对应的函数执行上下文对象

*对局部数据进行预处理

*形参变量==>赋值(实参)==>添加为执行上下文的属性

* arguments==>赋值(实参列表), 添加为执行上下文的属性

* var定义的局部变量==>undefined, 添加为执行上下文的属性

* function声明的函数 ==>赋值(fun), 添加为执行上下文的方法

* this==>赋值(调用函数的对象)

*开始执行函数体代码

iii.执行上下文栈

①理解

1.在全局代码执行前, JS引擎就会创建一个栈来存储管理所有的执行上下文对象

2.在全局执行上下文(window)确定后, 将其添加到栈中(压栈)

3.在函数执行上下文创建后, 将其添加到栈中(压栈)

4.在当前函数执行完后,将栈顶的对象移除(出栈)

5.当所有的代码执行完后, 栈中只剩下window

②流程分析

var a =10

var bar = function (x) {

var b = 5

foo(x + b)

}

var foo = function (y) {

var c = 5

console.log(a + c + y)

}

bar(10)

c)作用域与作用域链

i.作用域

1.理解

*就是一块"地盘", 一个代码段所在的区域

*它是静态的(相对于上下文对象), 在编写代码时就确定了

2.分类

*全局作用域

*函数作用域

*没有块作用域(ES6有了)

3.作用

*隔离变量，不同作用域下同名变量不会有冲突

ii.作用域与执行上下文

1.区别1

*全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定了。而不是在函数调用时

*全局执行上下文环境是在全局作用域确定之后, js代码马上执行之前创建

*函数执行上下文环境是在调用函数时, 函数体代码执行之前创建

2.区别2

*作用域是静态的,只要函数定义好了就一直存在, 且不会再变化

*上下文环境是动态的, 调用函数时创建, 函数调用结束时上下文环境就会被释放

3.联系

*上下文环境(对象)是从属于所在的作用域

*全局上下文环境==>全局作用域

*函数上下文环境==>对应的函数使用域

iii.作用域链

1.理解

*多个上下级关系的作用域形成的链, 它的方向是从下向上的(从内到外)

*查找变量时就是沿着作用域链来查找的

2.查找一个变量的查找规则

*在当前作用域下的执行上下文中查找对应的属性, 如果有直接返回, 否则进入2

*在上一级作用域的执行上下文中查找对应的属性, 如果有直接返回, 否则进入3

*再次执行2的相同操作, 直到全局作用域, 如果还找不到就抛出找不到的异常

d)闭包

i.引子实例

Title

/*

需求: 点击某个按钮, 提示"点击的是第n个按钮"

*/

测试1

测试2

测试3

ii.理解闭包

1.如何产生闭包?

*当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时, 就产生了闭包

2.闭包到底是什么?

*使用chrome调试查看

*理解一: 闭包是嵌套的内部函数(绝大部分人)

*理解二: 包含被引用变量(函数)的对象(极少数人)

*注意: 闭包存在于嵌套的内部函数中

3.产生闭包的条件?

*函数嵌套

*内部函数引用了外部函数的数据(变量/函数)

iii.常见的闭包

1.将函数作为另一个函数的返回值

2.将函数作为实参传递给另一个函数调用

iv.闭包的作用

1.使用函数内部的变量在函数执行完后, 仍然存活在内存中(延长了局部变量的生命周期)

2.让函数外部可以操作(读写)到函数内部的数据(变量/函数)

v.闭包的生命周期

1.产生: 在嵌套内部函数定义执行完时就产生了(不是在调用)

2.死亡: 在嵌套的内部函数成为垃圾对象时

function fun1() {

//问题2: 此时闭包产生了吗?

var a = 3;

function fun2() {

a++;

console.log(a);

}

return fun2;

}

//问题1: 此时闭包产生了吗?

var f = fun1();

//问题3: 此时闭包释放了吗?

f();

f();

//问题4: 此时闭包释放回收了吗?

//问题5: 如何让闭包释放回收呢?

vi.闭包的应用自定义JS模块

闭包的应用 : 定义JS模块

*具有特定功能的js文件

*将所有的数据和功能都封装在一个函数内部(私有的)

*只向外暴露一个包信n个方法的对象或函数

*模块的使用者,只需要通过模块暴露的对象调用方法来实现对应的功能

闭包的缺点及解决

1.缺点

*函数执行完后, 函数内的局部变量没有释放, 占用内存时间会变长

*容易造成内存泄露

2.解决

*能不用闭包就不用

*及时释放