JavaScript高级

22. 作用域与作用域链
23. 面试题
24. 循环遍历和监听
25. 闭包理解
26. 常见闭包
27. 闭包作用
28. 闭包生命周期
29. 闭包应用-自定义JS模块
30. 内存溢出与内存泄露
31. 面试题
32. 对象创建模式
33. 原型链继承
34. 组合继承

JavaScript高级部分之面向对象高级总结，需要重点掌握和理解闭包，如果有任何问题欢迎讨论或留言

22. 作用域与作用域链

理解：
它是一块“地盘”，一个代码段所在的区域
它是静态的（相对于上下文对象），在编写代码时就确定了
分类：
全局作用域
局部作用域
没有块作用域（ES6有）
作用：
隔离变量，不同作用域下同名变量不会有冲突

作用域与执行上下文：
区别1：1.全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定了。而不是在函数调用时
全局执行上下文是在全局作用域确定之后，JS代码马上执行之前创建
2.函数执行上下文是在调用函数时，函数体代码执行之前创建

区别2：1.作用域是静态的，只要函数定义好了就一直存在，且不会再变化
2.执行上下文是动态的，调用函数时创建，函数调用结束时就会被自动释放

联系：执行上下文环境（对象）是从属于所在的作用域
全局上下文环境–>全局作用域
函数上下文环境–>局部作用域

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>if(true){var c = 3}console.log(c)//可以访问c,3var a = 10, b = 20function fn(x){var a = 100,c = 300console.log('fn()',a,b,c,x)//'fn()',100,20,300,10function bar (x){var a = 1000,d = 400console.log('bar()',a,b,c,d,x)}bar(100)//'fn()',1000,20,300,400,100bar(200)//'fn()',1000,20,300,400,200}fn(10)var a = 1function f1(){var b = 2function f2(){var c = 3console.log(c)//3console.log(b)//2console.log(a)//1console.log(d)//报错}f2()}f1()</script>
</head>
<body></body>
</html>

23. 面试题

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>//面试题1var x = 10function fn(){console.log(x)}function show(f){var x = 20f()}show(fn)//作用域在编写代码时已经确定且不会改变，fn函数与show函数为两个单独作用域//面试题2var fn = function(){console.log(fn)}var obj = {fn2:function(){console.log(fn2)// console.log(this.fn2)}}obj.fn2()//报错，自己作用域下找不到fn2属性</script>
</head>
<body></body>
</html>

24. 循环遍历和监听

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>/* 没有达到结果，因为全局变量i已为3window.onload = function (){var btns = document.getElementsByTagName("button")for(var i=0,length=btns.length;i<length;i++){var btn = btns[i]btn.onclick = function(){alert('第'+ (i+1) + '个')}}}*//* 将btn所对应的下标作为对象的属性保存下来window.onload = function (){var btns = document.getElementsByTagName("button")for(var i=0,length=btns.length;i<length;i++){var btn = btns[i]btn.index = ibtn.onclick = function(){alert('第'+ (this.index+1) + '个')}}}*///闭包解决问题window.onload = function (){var btns = document.getElementsByTagName("button")for(var i=0,length=btns.length;i<length;i++){(function(i){//形参：局部变量ivar btn = btns[i]btn.onclick = function(){alert('第'+ (i+1) + '个')}})(i)//实参：全局参数i}}</script>
</head>
<body><button>测试1</button><button>测试2</button><button>测试3</button>
</body>
</html>

25. 闭包理解

如何产生闭包：
当一个嵌套的内部（子）函数引用了嵌套的外部（父）函数的变量（函数）时，就产生了闭包

闭包到底是什么？
使用chrom浏览器调试查看
理解一：闭包是嵌套的内部函数（绝大部分人）
理解二：包含被引用变量（函数）的对象（极少数人）
注意：闭包存在与嵌套的内部函数中

闭包产生的条件：
函数嵌套
内部函数引用了外部函数的数据（变量/函数）
执行外部函数（为了执行内部函数定义）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>function fn1(){var a = 2var b = 'abc'function fn2(){console.log(a)}fn2()}fn1()</script>
</head>
<body></body>
</html>

26. 常见闭包

将函数作为另外一个函数的返回值
将函数作为实参传递给另一个函数调用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>//将函数作为另一个函数的返回值function fn1() {var a = 2function fn2() {a++console.log(a)}return fn2}var f = fn1()f()f()//将函数作为实参传递给另一个函数调用function showDelay(msg, time){setTimeout(function(){alert(msg)},time)}showDelay('hello',2000)</script>
</head>
<body></body>
</html>

27. 闭包作用

问题1：函数执行完后，函数内部声明的局部变量是否还存在？
一般不存在，存在与闭包中的局部变量才可能存在
问题2：在函数外部能否直接访问函数内部的局部变量？
不能，但可以通过闭包让外部操作它

作用：
使用函数内部的变量在函数执行完后，仍然存活在内存中（延长了局部变量的生命周期）
让函数外部可以操作（读写）到函数内部的数据（变量/函数）

28. 闭包生命周期

产生：在嵌套内部函数定义执行完时就产生了（不是调用）
消亡：在嵌套的内部函数成为垃圾对象时

29. 闭包应用-自定义JS模块

具有特定功能的JS文件
将所有的数据和功能都封装在一个函数内部（私有的）
只向外暴露一个包含n个方法的对象或函数
模块的使用者，只需要通过模块暴露的对象调用方法来实现对应的功能

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>function MyModule1(){//私有数据var msg = 'Hello World'//操作数据function upCase(){console.log('upCase()' + msg.toUpperCase())}function lowerCase(){console.log('lowerCase() ' + msg.toLowerCase())}//向外暴露，给外部使用return {upCase:upCase,lowerCase:lowerCase}}var Module1 = MyModule1()Module1.upCase()Module1.lowerCase();(function(){var msg = 'How old ?'function up(){console.log('upCase() ' + msg.toUpperCase())}function lower(){console.log('lowerCase() ' + msg.toLowerCase())}window.MyModule2 = {up:up,lower:lower}})()MyModule2.up()MyModule2.lower()</script>
</head>
<body></body>
</html>

30. 内存溢出与内存泄露

缺点：函数执行完后，函数内的局部变量没有被释放，占用内存时间会变长
容易造成内存泄露

解决：能不用闭包就不使用
及时释放

内存溢出：
一种程序运行时出现的错误
当程序运行时需要的内存超过了剩余的内存时，就抛出内存溢出的错误

内存泄露：
占用的内存没有及时释放
内存泄露积累多了就容易导致内存溢出
常见的内存泄露：
意外的全局变量
没有及时清理的计时器或回调函数
闭包

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>//内存溢出var obj ={}for(var i=0;i<=10000;i++){obj[i] = new Array(1000000)console.log("-------------")}//内存泄露---意外的全局变量function fn(){a = new Array(1000000)console.log(a)}fn()//内存泄露---不清理计算器var intervalId  = setInterval(function(){console.log('-----------')})clearInterval(intervalId)//内存泄露---闭包function fun(){var a = 4function fun2(){console.log(++a)}return fun2}var f = fun()f()f = null</script>
</head>
<body></body>
</html>

31. 面试题

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>//代码片段一，无闭包,注意调用函数的对象var name = "The Window"var object = {name:"My Object",getNameFunc:function(){return function(){return this.name};}};alert(object.getNameFunc()());//"The Window"//代码片段二,有闭包，注意调用函数的对象var name2 = "The Window"var object2 = {name2:"My Object",getNameFunc:function(){var that = thisreturn function(){return that.name};}};alert(object.getNameFunc()());//"My Object"//代码片段三function fun(n,o){console.log(o)return {fun:function(m){return fun(m,n)}}}var a = fun(0); a.fun(1); a.fun(2); a.fun(3);var b = fun(0).fun(1).fun(2).fun(3)var c = fun(0).fun(1); c.fun(2); c.fun(3);</script>
</head>
<body></body>
</html>

32. 对象创建模式

方式一：Object构造函数模式
套路：先创建空Object对象，再动态添加属性/方法
适用：起始不确定对象内部数据
问题：语句太多

方式二：对象字面量模式
套路：使用{ }创建对象，再动态添加属性/方法
适用：起始不确定对象内部数据
问题：如果创建多个对象，有重复代码

方式三：工厂模式
套路：通过工厂函数动态创建对象并返回
适用：需要创建多个对象
问题：对象没有一个具体的类型，都是Object

方式四：自定义构造函数模式
套路：自定义构造函数，通过new创建对象
适用：需要创建多个类型确定的对象
问题：每个对象都有相同的数据（方法），浪费内存

方式五：构造函数+原型组合模式
套路：自定义构造函数，属性在函数中初始化，方法添加到原型中
适用：需要创建多个类型确定的对象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>//Object构造函数模式var p = new Object()p.name = 'Tom'p.age = 12p.setName = function(name){this.name = name}console.log("-------Object构造函数模式--------")console.log(p.name)p.setName('Jerry')console.log(p.name)//对象字面量模式var p = {name:'Tom',age:12,setName:function(name){this.name = name}}console.log("-------对象字面量模式--------")console.log(p.name,p.age)p.setName('Jerry')console.log(p.name,p.age)//工厂模式function createPerson(name,age){var obj = {name:name,age:age,setName:function(name){this.name = name}}return obj}function createStudent(name,price){var obj = {name:name,price:price}return obj}console.log("-------工厂模式--------")var p1 = createPerson('Tom',12)var p2 = createPerson('Jerry',20)console.log(p1)console.log(typeof p1)var s = createStudent('zs',20000)console.log(typeof s)//自定义构造函数模式function Person(name,age){this.name = namethis.age = agethis.setName = function(name){this.name = name}}function Student(name,price){this.name = namethis.price = price}console.log("-------自定义构造函数模式--------")var per1 = new Person('lisi',18)per1.setName('wangwu')console.log(per1.name,per1.age)console.log("Person类型",per1 instanceof Person)var per2 = new Person('liuniu',30)console.log(per1)console.log(per2)var s = new Student('huangliu',25000)console.log("Student类型",s instanceof Student)//构造函数+原型组合模式function Peopel(name,age){this.name = namethis.age = age}Peopel.prototype.setName = function(name){this.name = name}console.log("-------构造函数+原型组合模式--------")var peo3 = new Peopel('laoliu',25)var peo4 = new Peopel('niuniu',26)console.log(peo3)console.log(peo4)</script>
</head>
<body></body>
</html>

33. 原型链继承

变量找作用域链
对象找原型链

套路：定义父类型构造函数
给父类型的原型添加方法
定义子类型的构造函数
创建父类型的对象赋值给子类型的原型
将子类型原型的构造属性设置为子类型（修正construct指向）
给子类型原型添加方法
创建子类型的对象：可以调用父类型的方法

关键：子类型的原型为父类型的一个实例对象

主要是利用：实例对象可以看到原型对象上的方法，则通过使子类型的原型指向父类型的实例对象，就可以实现子类型对象访问父类型的方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>//父类型function Supper(){this.supProp = 'Supper property'}Supper.prototype.showSupperProp = function(){console.log(this.supProp)}//子类型function Sub(){this.subProp = 'Sub property'}Sub.prototype = new Supper()//子类型的原型为父类型的一个实例对象Sub.prototype.constructor =Sub//子类型的原型的constructor指向子类型Sub.prototype.showSubProp = function(){console.log(this.subProp)}var sub = new Sub()sub.showSupperProp()//能执行说明有继承sub.showSubProp()console.log(sub.constructor)</script>
</head>
<body></body>
</html>

34. 组合继承

借用构造函数继承（假的）
套路：定义父类型构造函数
定义子类型构造函数
在子类型构造函数中调用父类型构造函数
关键：在子类型构造函数中通过call( )调用父类型构造函数

组合继承：原型链+借用构造函数组合继承
利用原型链实现对父类型对象的方法继承
利用call( )借用父类型构造函数初始化相同属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>function Person(name,age){this.name = namethis.age = age}Person.prototype.setName = function(name){this.name = name}function Student(name,age,price){Person.call(this,name,age)//相当于this.Person(name,age),为了得到属性this.price = price}// var s = new Student('Tom',20,14000)// console.log(s.name,s.age,s.price)Student.prototype = new Person()//子类型的原型为父类型的一个实例对象,为了能看到父类型的方法Student.prototype.constructor = StudentStudent.prototype.setPrice = function(price){this.price = price}var s = new Student('Tom',24,18000)s.setName('Jack')s.setPrice('50000')console.log(s.name,s.age,s.price)</script>
</head>
<body></body>
</html>

JavaScript高级（三）相关推荐

JavaScript高级程序设计学习笔记（三）
分享一下第五章(引用类型)的笔记,内容比较多,我拆成了两部分,今天这部分是关于Object.Array.Date和RegExp类型的. 以下的笔记是书上一些我以前学习的时候,没有太重视的js基础知识, ...
JavaScript高级第2天：定义函数的三种方式、函数的原型链结构、完整原型链、作用域以及作用域链、函数的四种调用模式、闭包、计数器、斐波那契数列优化、三种继承方式
JavaScript高级第二天 01-定义函数的三种方式 1.函数声明 function:可以先调用再声明,因为预解析(把函数声明.变量声明进行提升) function fn() {//函数体conl ...
JavaScript高级程序设计第三版.CHM【带实例】
从驱动全球商业.贸易及管理领域不计其数的复杂应用程序的角度来看,说 JavaScript 已经成为当今世界上最流行的编程语言一点儿都不为过. JavaScript 是一种非常松散的面向对象语言,也是 ...
JavaScript高级编程设计（第三版）——第四章：变量作用域和内存问题
系列文章目录第二章:在html中使用javaScript 第三章:基本概念第四章:变量作用域和内存问题第五章:引用类型目录系列文章目录前言一.基本数据类型和引用类型的值? 1.数据类型 ...
JavaScript高级编程设计（第三版）——第三章：基本概念
系列文章目录第二章:在html中使用javaScript 第三章:基本概念第四章:变量作用域和内存问题目录系列文章目录前言一.语法 1.标识符 2.关键字和保留字二.数据类型 1.nul ...
《JavaScript高级程序设计（第3版）》教程大纲
词条 <JavaScript高级程序设计>是2006年人民邮电出版社出版的图书,作者是(美)(Nicholas C.Zakas)扎卡斯.本书适合有一定编程经验的开发人员阅读,也可作为高校相 ...
前端红宝书《JavaScript高级程序设计》核心知识总结
此文是对<JavaScript 高级程序设计>一书难点的总结,也是笔者在看了 3 遍之后的一些梳理和感想,希望能借此巩固js的基础和对一些核心概念有更深入的了解. 摘要 JS基本的数据类型 ...
攻下《JavaScript高级程序设计》——第二章在HTML中使用JavaScript
从上一章我们知道了,JavaScript是一种专门为网页交互而设计的脚本语言,那么,它就免不了和HTML打交道,所以在设计JavaScript的时候,Netscape首要面临的就是,怎么让HTML和J ...
《javascript高级程序设计》笔记：内存与执行环境
上一篇:<javascript高级程序设计>笔记:继承近几篇博客都会围绕着图中的知识点展开由于javascript是一门具有自动垃圾收集机制的编程语言,开发者不必担心内存的分配和回收的 ...

JavaScript高级（三）