JavaScript高级（三）

已于 2022-11-18 10:44:19 修改
阅读量202 收藏
点赞数
分类专栏： JavaScript高级 文章标签： javascript 前端 开发语言
于 2022-11-10 20:48:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47743942/article/details/127795826
版权

JavaScript高级


 
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,3

        var a = 10, b = 20
        function fn(x){
            var a = 100,
                c = 300
            console.log('fn()',a,b,c,x)//'fn()',100,20,300,10
            function bar (x){
                var a = 1000,
                    d = 400
                console.log('bar()',a,b,c,d,x)
            }
            bar(100)//'fn()',1000,20,300,400,100
            bar(200)//'fn()',1000,20,300,400,200
        }
        fn(10)

        var a = 1
        function f1(){
            var b = 2
            function f2(){
                var c = 3
                console.log(c)//3
                console.log(b)//2
                console.log(a)//1
                console.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>
        //面试题1
        var x = 10
        function fn(){
            console.log(x)
        }
        function show(f){
            var x = 20
            f()
        }
        show(fn)//作用域在编写代码时已经确定且不会改变，fn函数与show函数为两个单独作用域

        //面试题2
        var 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已为3
        window.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 = i
                btn.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){//形参：局部变量i
                var 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 = 2
            var 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 = 2
            function 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 = 4
            function 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 = this
                return 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 = 12
        p.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 = name
            this.age = age
            this.setName = function(name){
                this.name = name
            }
        }
        function Student(name,price){
            this.name = name
            this.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 = name
            this.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 = name
            this.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 = Student
        
        Student.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>

在这里插入图片描述

339+
关注
专栏目录
javascript高级程序设计 第三版
REDJOLER的博客
07-25 882
网盘地址 提取码：vh81 笔记 第二章 2.1script标签 <script>元素属性：async、charset、defer、language、src、type async和defer只对外部脚本有效，language已废弃，type默认为“text/javascript” defer属性可以让脚本在文档完全呈现之后再执行，且按照指定的顺序执行 设置了async的脚本文件不一定按照书写顺序执行，所以文件间应该互不依赖；异步脚本会在页面的load事件前执行，但可能会在DOMContentL
javascript高级程序设计
06-02
"JavaScript高级程序设计"是一本深入探讨JavaScript编程语言的书籍，旨在帮助读者掌握JS的各个方面，适合自学者进行系统学习。以下是对书中的主要知识点的详细阐述： 1. JavaScript简介： JavaScript是一种广泛...
JavaScript 高级教程
apollo_miracle的博客
12-27 1851
JavaScript 简介 JavaScript 历史 本节为您讲解 JavaScript 和客户端脚本的起源。 JavaScript 实现 完整的 JavaScript 实现是由以下 3 个不同部分组成的：ECMAScript、文档对象模型、浏览器对象模型。 ECMAScript 基础 ECMAScript 语法 Java 和 ECMAScript 有一些关键的语法特性相同，也有一...
JavaScript高级程序设计（第三版）阅读笔记
qq_42543548的博客
01-07 661
再读JavaScript高级程序设计（第三版）阅读笔记
JavaScript高级语法
CV工程师
08-05 1700
Exception JSON AJAX WebStorage Closure
javaScript高级
dai_jiaxing的博客
04-26 1248
个人整理的一些js高级语法，有对BOM、DOM、事件、Ajax、对象详解(建议PC网页观看) ヾﾉ≧∀≦)o
JavaScript高级（详细总结）
程序员阿龙的博客
08-19 2241
JavaScript高级（详细总结）
程序员推荐JavaScript高级程序设计
leenhem的博客
05-26 1174
Nicholas C. Zakas（尼古拉斯•泽卡斯）世界顶级Web技术专家，现为雅虎公司界面呈现架构师，负责My Yahoo!和雅虎首页等大访问量站点的设计。尼古拉斯拥有丰富的Web开发和界面设计经验，曾经参与许多世界级大公司的Web解决方案开发。他还是High Performance JavaScript一书的作者，并与他人合作撰写了Professional Ajax和Even Faster Web Sites。尼古拉斯拥有梅里马克学院计算机科学学士学位和埃迪柯特学院的MBA学位。他的个人网站是www.
JavaScript高级 笔记
踩的坑越多，经验越多
09-16 2999
JavaScript高级 学习笔记总结
JavaScript高级程序设计（红宝书）学习笔记
m0_63882057的博客
03-09 1494
（：介绍了一些很宏观大概的与JS相关的内容，浮光掠影地过了一遍，对JS的定义和大概版本兼容组成有了一些认识。JavaScript是一种专为网页交互设计的脚本语言，由下列三种不同部分组成：①ECMAScript，提供核心语言功能②文档对象模型（DOM），提供访问和操作网页内容的方法和接口③浏览器对象模型（BOM），提供与浏览器交互的方法和接口。
JavaScript高级教程（面向对象编程）
一只努力搬砖的打工妹纸
01-25 5322
面向对象编程 有两大编程思想：面向过程和面向对象； 面向过程编程POP(Process-oriented programming) 面向过程即分析出解决问题所需要的步骤，然后用函数将这些步骤一步步实现，使用的时候再一个个的一次调用就可以了； 即将大象装进冰箱，从面向过程来看，需要打开冰箱门、装进去大象、关上冰箱门 面向对象编程OOP(Object Oriented Programming) 面向对象即把事务分解成为一个个对象，然后由对象之间分工与合作；是以对象功能来划分问题，而不是步骤；在面向对
高级JavaScript
02-14
CommonJS、AMD（RequireJS）和ES6模块是JavaScript的三种主要模块系统。理解它们的工作原理，选择合适的模块化方案，可以帮助开发者实现代码的复用和隔离，降低项目复杂度。 **5. 类与继承** ES6引入了Class语法糖...
Javascript 高级程序设计（第3版）超清中文PDF
10-20
《JavaScript高级程序设计》（第3版）是一本深入探讨该语言精髓的权威书籍，它为读者提供了全面且深入的JavaScript知识，包括语言核心、DOM操作、BOM处理、事件处理以及面向对象编程等多个方面。 在书中，作者详细...
JavaScript高级程序设计第三版中文
06-21
《JavaScript高级程序设计》是学习这一语言的经典教材，现在已经更新到第三版，并提供了完整的中文翻译，对于国内开发者来说，无疑是一份宝贵的资源。这本书深入浅出地讲解了JavaScript的核心概念和高级特性，帮助...
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 784
Vue 2 中使用 Vue I18n 插件实现中英文切换
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 517
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1115
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
如何使用Redisson的布隆过滤器？
最新发布
付聪
10-02 218
【代码】如何使用Redisson的布隆过滤器？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值