js高级 重要知识点：原型链、闭包、自定义模块

最新推荐文章于 2024-05-25 23:08:11 发布
最新推荐文章于 2024-05-25 23:08:11 发布
阅读量846 收藏
点赞数
分类专栏： 前端从入门到精通 文章标签： javascript 前端 es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37437892/article/details/121244561
版权

原型链（别名：隐式原型链）

作用： 查找对象的属性（方法）
访问一个对象的属性时：

  1. 先在自身属性中查找，找到返回
  2. 如果没有，再沿着__proto__这条链向上查找，找到就返回
  3. 如果最终没有找到，放回undefined

在这里插入图片描述

  1. 函数的显示原型指向的对象是空Object实例对象（但Object不满足）
  2. 所有的函数都是Function的实例（包含Function）
  3. Object 原型对象是原型链的尽头

读取对象的属性值时：会自动到原型链中查找
设置对象的属性值时：不会查找原型链，如果当前对象中没有此属性，直接添加此属性并设置其值
方法一般定义在原型中，属性一般通过构造函数定义在对象本身上

    function AA() {

     }
     AA.prototype.a = 'xxx';
     var fn1 = new AA();
     console.log(fn1.a, fn1);

     var fn2 = new AA();
     fn2.a = 'yyy';
     console.log(fn2.a, fn2);

在这里插入图片描述



        // 函数的显示原型指向的对象是空Object实例对象（但Object不满足）

        console.log(myfn.prototype instanceof Object);
        console.log(Function.prototype instanceof Object);
        console.log(Object.prototype instanceof Object);

        // 所有的函数都是Function的实例（包含Function）
        console.log(Function.__proto__ === Function.prototype);
        // Object 原型对象是原型链的尽头
        console.log(Object.prototype.__proto__);//值为null

在这里插入图片描述

变量提升与函数提升

       var a = 3;

        function test() {
            console.log(a);
            var a = 4;
        }
        test();

输出是undefined 函数体内相当于执行了
var a; console.log(a); a=4;

     var a = 3;

        function test() {
            console.log(a);
            // var a = 4;
        }
        test();
//此时输出3

变量（声明）提升 ：通过var定义的变量，在定义语句之前就可以访问到，只不过此时值为undefined
函数（声明）提升： 通过function声明的函数，在之前就可以直接调用，值是函数定义（对象）



        console.log(b); //变量声明提升

        fn2(); //可调用  函数（声明）提升
        var b = 3;

        function fn2() {
            console.log("fn2()");
        }

全局执行上下文

  1. 在执行全局代码前将window确定为全局执行上下文
  2. 对全局数据进行预处理： var定义的全局变量===》undefined，添加为window的属性 function声明的全局函数，添加为window的方法 this赋值为window 然后开始执行全局代码。

函数执行上下文

  1. 在调用函数，准备执行函数体之前，创建对应的函数执行上下文对象（虚拟）
  2. 对局部数据进行预处理： 形参–> 实参（赋值）–>添加为执行上下文的属性
    arguments --》实参列表（赋值）–> 添加为执行上下文的属性
    var定义的局部变量–> undefined ，添加为执行上下文的属性
    function声明的函数–> 赋值（fun），添加为执行上下文的方法
    this–》赋值（调用函数的对象）
    开始执行函数体代码


        console.log("函数执行上下文");

        function myfn(a1) {
            console.log(a1); //2
            console.log(a2); //undefined
            a3(); //a3()
            console.log(this); //window
            console.log(arguments); // 伪数组（2，3）

            var a2 = 3;

            function a3() {
                console.log("a3()");
            }

        }
        myfn(2, 3);

在这里插入图片描述

函数闭包

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

闭包的生命周期：

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

闭包的缺点

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

如何解决

及时释放 让某个对象=null，召唤垃圾回收器
例如 var f = fn1(); f(); f=null ; 让内部函数成为垃圾对象 —> 回收闭包

哪些情况可能会造成内存泄露

意外的全局变量
没有及时清理的定时器或者回调函数
闭包

闭包的应用 自定义js模块

推荐使用闭包 调用方便

function myModule1() {
    var str = "zhOUdage";

    function dosomething() {
        console.log("dosomething()" + str.toUpperCase());

    }

    function doother() {
        console.log("doother()" + str.toLowerCase());

    }
    return {
        dosomething: dosomething,
        doother: doother
    };
}


// 使用闭包
(function() {
    var str = "zhOUdage";

    function dosomething() {
        console.log("dosomething()" + str.toUpperCase());

    }

    function doother() {
        console.log("doother()" + str.toLowerCase());

    }

    window.myModule2 = {
        dosomething: dosomething,
        doother: doother
    };
})()


  <script src="myModule.js"></script>
    <script type="text/javascript">
        var module = myModule1();
        module.dosomething();
        module.doother();

        // 上面是方式一

        myModule2.doother();
        myModule2.dosomething();
    </script>

继承

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

在这里插入图片描述

定时器真的是定时执行的吗

定时器并不能保证真正定时执行
一般会延迟一点儿（可以接受），但做一个长时间的工作，会延迟不能接受的时间


<head>

        window.onload = function() {
            var btn = document.getElementsByClassName("btn")[0];
            btn.onclick = function() {
                var date = Date.now();
                console.log("定时器执行前");
                setTimeout(function() {
                    console.log("延时", Date.now() - date);
                }, 200);

                console.log("定时器执行后");


                for (var i = 0; i < 1000000000; ++i) {}

            }



        }
    </script>
</head>

<body>

    <button class="btn">点我延迟200</button>
</body>

在这里插入图片描述

js单线程执行，如何证明

代码如下

 setTimeout(function() {
                console.log("timeout 2222");
            }, 2000)

            setTimeout(function() {
                console.log("timeout 111");
            }, 1000);


            setTimeout(function() {
                console.log("timeout 000");

            }, 0);

            function fn() {
                console.log("fn()");
            }

            fn();

            console.log("alert之前");

            alert("----------------");
            // 暂停主线程执行  同时暂停计时
            console.log("alert之后");

代码分类：
初始化代码 回调代码

js引擎执行代码的基本流程

  • 先执行初始化代码：例如：绑定事件监听、设置定时器、发送ajax请求
  • 后面在某个时刻才执行回调代码

在这里插入图片描述

为什么js使用单线程而不是多线程：
与它的用途有关，作为脚本语言，主要是与用户互动，以及操作dom，决定了它只能是单线程，否则会带来很复杂的同步问题

js分线程，不更新界面，适用于后台数据处理部分（算菲薄拉契数列例子）

主代码


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">
        window.onload = function() {
            var btn = document.getElementById("btn");
            var num = document.getElementById("number");
            //  1 1 2 3

            btn.onclick = function() {
                // // alert("hello");
                // alert(cal(parseInt(num.value)));

                // 创建一个worker，并向他传递将在新线程中执行的脚本名
                var worker = new Worker("worker.js");
                // 向分线程发送消息
                worker.postMessage(num.value);

                // 接受worker传过来的数据函数
                worker.onmessage = function(event) {
                    console.log("主线程收到的数据" + event.data);
                }

            }
        }
    </script>
</head>

<body>
    <input type="text" id="number" placeholder="要计算的值">
    <button id="btn">计算菲薄拉起数列</button>

</body>

</html>

分线程代码

function cal(n) {
    return n <= 2 ? 1 : cal(n - 1) + cal(n - 2);
}


var onmessage = function(event) {
    console.log("分线程收到的数据", event.data);
    var tmp = cal(parseInt(event.data));

    //  将处理后的数据发送给主线程
    postMessage(tmp);
}
爱学习的羽
关注
专栏目录
JavaScript 原型链与闭包
weixin_43339112的博客
07-11 592
JavaScript原型与原型链 原型   JavaScript中创建的每一个函数，解析器都会向函数中添加一个属性prototype。该属性默认指向一个空object实例对象，即原型对象。   原型对象中有一个constructor属性，它指向函数对象。   通过构造函数创建的每个实例对象，解析器都会向对象中添加一个属性__proto__,默认指向的也是原型对象。 prototype可称为显示原型属性；__proto__可称为隐式原型属性。 即，实例对象.__proto__===类.prototyp
JS之二原型链和闭包
qq_31749421的博客
02-19 891
概览： 一：原型与原型链 二：闭包 一：原型与原型链 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190212160532257.png 代码段： &amp;lt;script&amp;gt; function Dog() { // 构造函数声明 this.age = 20; } // 构造函数原型对象上添加属性 we...
JavaScript 原型及原型链，闭包——小记
Pany的博客
02-28 780
参考资料，并强烈推荐：最详尽的 JS 原型与原型链终极详解，没有「可能是」 知乎专栏：如何才能通俗易懂的解释javascript里面的‘闭包’？ 原型： 所有对象的 _ proto _ 都指向其构造器的 prototype var Person = { name: '', abc: function (){ } } var person1 = ne...
js原型、原型链、作用域链、闭包、垃圾回收机制
南风
07-26 1238
这些天看了JavaScript的一些基础，想把所学习的都总结一下，毕竟了解是一回事，表达清楚又是另一回事，所以以后会坚持把所学习的知识做一个总结，理清思路，训练表达能力，每天进步一点点(#^.^#)。 一、几个基本的概念介绍 什么是作用域？ 作用域就是代码运行时，各个变量、函数及对象的可访问性，换句话说，就是作用域决定了你代码中变量和其他资源在各个区域的可见性。 什么是执行环境？ 执行环...
js原型链和闭包
在下月亮有何贵干
05-15 299
js原型链和闭包1 原型链1.1 原型链是什么1.2 原型链作用2 闭包2.1 闭包是什么2.2 闭包特性2.3 闭包缺点2.4 闭包作用 1 原型链 1.1 原型链是什么 在JavaScript 中，每个对象都有一个指向它的原型（prototype）对象的内部链接。这个原型对象又有自己的原型，直到某个对象的原型为 null 为止（也就是不再有原型指向），组成这条链的最后一环。这种一级一级的链结构就称为原型链（prototype chain） 1.2 原型链作用 因为es6之前，js没有类的概念，就需要原型
jsavanzado:高级JS课程练习
06-02
2. **原型链（Prototype Chain）**：JavaScript的对象继承是通过原型链实现的，理解这一机制有助于我们更好地设计和扩展类。了解`__proto__`、`Object.prototype`和`prototype`属性的关系，以及如何使用`Object....
黑马前端学习JS高级md
11-15
这些知识点涵盖了JavaScript高级编程的核心内容，通过黑马前端的JS高级md复习资料，开发者可以系统地学习和巩固这些技能，提升自己的前端开发能力。同时，媒体文件可能包含相关的示例代码或教学视频，为理论知识的...
前端面试必备知识点：HTML, CSS, JavaScript, DOM与HTTP
JavaScript是前端的核心语言，涉及数据类型、面向对象编程、继承、闭包、插件开发、作用域、跨域、原型链、模块化、自定义事件、内存管理等。特别是内存泄漏，是性能优化中需要注意的问题。事件机制和异步处理，如回...
JavaScript学习：深入了解一项知识点
总而言之，闭包和原型链是学习JavaScript过程中两个重要的知识点。闭包可以帮助我们解决一些常见的问题，同时也为实现模块化的编程提供了一种方式。原型链则是实现对象继承的机制，通过原型链，我们可以实现代码的...
前端面试必备：CSS定位、JS原型链与Webpack解析
该资源是一份面试题的Markdown文件，包含了一些前端开发常见的技术知识点，如本地存储、CSS布局（display、定位）、CSS初始化、PostCSS、JavaScript的闭包、原型链、this的概念以及Webpack模块打包工具。 1. **本地...
js原型链与闭包概念
www658的博客
06-06 164
js理论
JS闭包、原型链简单理解
最新发布
市民景先生
05-25 380
js跟java有一个很大的区别就是，事件函数会延时执行，比如在一个for循环中，里面再执行一个内部方法，java中的内部方法是及时响应并执行完整。函数也是一种特殊的对象，都是继承object,但是在es6之前，没有引用class这个概念，使用prototype(原型对象)和__proto__(实例对象)来进行关联。因为var的做用户是函数的作用域，所以共享会导致该问题，但入伏哦使用块级就可以解决该问题。,闭包是一个函数加上创建函数的作用域的连接，闭包"关闭"了函数的自由变量。原型对象prototype。
js原型链与闭包
zhj574182446的博客
04-27 718
这里不讲js基础，就将闭包，函数与对象的关系是啥？对象是构造函数创建的，对象也可以是通过字典的形式组成，这两种方式是js中创建对象的方式。而函数也是对象，函数有一个属性是prototype，prototype是一个Object对象，那么是对象就可以为它增加属性。
js原型与原型链、闭包课堂笔记
m0_59248606的博客
06-06 176
作用：1.实现了js的继承 2.可以给所有的类的实例添加公用方法和属性概念：1.每个构造函数(类)都有一个显示原型prototype 2.每个实例(对象)都有一个隐式原型__proto__3.对象的隐式原型__proto__等于其构造函数(类)的显示原型prototype4.当查找对象的属性或方式，现在自身上找，找不到则沿着原型的原型(__proto__,__proto__)向上查找5.我们把原型的原型形式的链条关系称之为原型链 二.闭包 作用：1.创建局部作用域；2.在函数外部访问函数内部的局部
js高级重要知识点
timeares的博客
04-23 360
闭包 闭包：既重用变量又保护变量不被篡改的一种编程方式 使用场合：只要希望既重用变量，又保护变量不被篡改时，就用闭包为一个函数保管专属的值 如何：3步 1.外层函数包裹里层函数 2.外层函数返回里层函数对象到外部 3.外部使用者使用外层函数，获得里层的的函数对象，并保存在外部变量中反复使用 闭包产生原理：在函数中含有[[Scopes]]，会保存下每次变量的执行结果 ...
JS高级
qq_49029709的博客
04-18 1180
01-课程介绍 1.1-课程特点 1.js高级是对js基础语法的一个补充说明，本质上还是对ECMAScript语法的一个延伸与进阶 2.js高级所要学习的语法相比而言没有js基础的多，但是会更加晦涩难懂 更加侧重的是理解(不求甚解) 1.2-课程大纲 1.对象进阶 （2天） 2.函数进阶 ( 1天 ) 3.ES6新语法( 1天 ) 02-面向对象编程 1.1-面向对象编程介绍 本小节知识点 1.理解什么是面向对象编程 面向对象不是一门技术，而是一种解决问题的思维方式 面向对象的本质是对面
JavaScript必须掌握的四大基础知识（数据类型、原型和原型链、闭包、异步 promise）
小陈的博客
09-26 511
为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。有需要的小伙伴，可以点击下方卡片领取，无偿分享)!)!)!)!
js中的闭包和原型链
逆流的博客
11-16 219
闭包
JS - 深入理解 Javascript 原型和闭包
kelly0721的博客
09-26 520
深入理解 Javascript 原型和闭包
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值