js 高级笔记 （函数高级）

最新推荐文章于 2022-09-16 23:31:01 发布
最新推荐文章于 2022-09-16 23:31:01 发布
阅读量1.8k 收藏 3
点赞数 2
文章标签： javascript 原型模式 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52566613/article/details/121692559
版权

文章目录

原型与原型链

原型

1. 函数的prototype属性

每个函数都有一个prototype属性，他默认指向一个Object空对象（即称为：原型对象）
原型对象中有一个属性constructor，它指向函数对象

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

作用函数的所有实例对象自动拥有原型中的属性（方法）

console.log(Date.prototype,typeof Date.prototype);
    function Fun() {

    }

    console.log(Fun.prototype); // 默认指向一个Object空对象（没有我们的属性）
    
    console.log(Fun.prototype);

    // 原型对象中有一个属性constructor,它指向函数对象
    console.log(Date.prototype.constructor===Date);
    console.log(Fun.prototype.constructor===Fun);

    // 给原型对象添加属性（一般是方法） ===>实例对象可以访问
    Fun.prototype.test = function() {
        console.log('test()');
    }
    var fun = new Fun();
    fun.test()

显示原型与隐式原型

1. 每个函数function都有一个prototype,即显式原型（属性）

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

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

4. 内存解构

在这里插入图片描述

5. 总结：

  • 函数的prototype属性：在定义函数时自动添加的，默认值是一个空Object对象
  • 对象的__proto__属性：创建对象时自动添加的，默认值为构造函数的prototype属性值
  • 程序员能直接操作显式原型，但不能直接操作隐式原型（ES6之前）
// 定义构造函数
        function Fn() { // 内部语句：this.prototype = {}
            
        }
        // 1. 每个函数function都有一个prototype,即显式原型（属性）,指向一个空的Object对象
        console.log(Fn.prototype);
        // 2. 每个实例对象都有一个__proto__，可称为隐式原型（属性
        // 创建实例对象
        var fn = new Fn();  // 内部语句:this.__proto__ = Fn.prototype
        console.log(fn.__proto__);  
        // 3. 对象的隐式原型的值为其对应构造函数的显示原型的值
        console.log(Fn.prototype === fn.__proto__); // true
        // 给原型添加方法
        Fn.prototype.test = function () {
            console.log('test()');
        }
        // 通过实例对象调动原型的方法
        fn.test();

原型链

1. 原型链（图解）

在这里插入图片描述

1. 访问一个对象的属性时，

先在自身属性中查找，找到返回
如果没有，再沿着__proto__这条链向上查找，找到返回
如果最终没找到，返回undefined
别名：隐式原型链
作用：查找对象的属性（方法）

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

在这里插入图片描述

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

在这里插入图片描述

function Fn() {
            this.test1 = function() {
                console.log('test1()');
            }
        }
        Fn.prototype.test2 = function() {
            console.log('test2()');
        }

        var fn = new Fn();
        fn.test1();
        fn.test2();
        console.log(fn.toString());
        fn.test3();

原型链的补充

1. 函数的显式原型指向的对象默认是空Object实例对象（但Object不满足）

console.log(Fn.prototype instanceof Object);    // true
        console.log(Object.prototype instanceof Object);    // false
        console.log(Function.prototype instanceof Object);  // true

2. 所有函数都是Function的实例（包含Function）

console.log(Function.__proto__ === Function.prototype); // true

3. Objct的原型对象是原型链尽头

console.log(Object.prototype.__proto__); // null

原型链_属性问题

1. 读取对象的属性值时：会自动到原型链中查找

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

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

本节代码：

 function Fn() {}
      Fn.prototype.a = "xxx";
      var fn1 = new Fn();
      console.log(fn1.a, fn1);

      var fn2 = new Fn();
      fn2.a = "yyy";
      console.log(fn1.a, fn2.a, fn2);

      function Person(name, age) {
        this.name = name;
        this.age = age;
      }
      Person.prototype.setName = function (name) {
        this.name = name;
      };
      var p1 = new Person("Tom", 12); // 属性在对象自身身上
      p1.setName("煌上煌");
      /* [[prototype]]和__proto__意义相同，均表示对象的内部属性，其值指向对象原型。
       前者在一些书籍、规范中表示一个对象的原型属性，后者则是在浏览器实现中指向对象原型。*/
      console.log(p1);

      var p2 = new Person("Jack", 12); // 属性在对象自身身上
      p2.setName("Cat");
      console.log(p2);
      // p1 和 p2 的隐式原型相等 原因是：实例对象的隐式原型等于构造函数的显示原型
      console.log(p1.__proto__ === p2.__proto__);   // true

探索instanceof

1. instanceof 是如何判断的？

表达式： A instanceof B
如果B函数的显式原型对象在A对象的原型链上，返回true，否则返回false

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

在这里插入图片描述
本节代码：

/*
            案例1
        */
        // 函数的原型对象是个空的Object实例对象
        function Foo() {};  // 创建一个函数
        var f1 = new Foo(); // 创建一个函数的实例化对象
        console.log(f1 instanceof Foo); // true 判断 Foo 的显式原型对象是否在 f1 的原型链上
        console.log(f1 instanceof Object); // true 
        
        /*
            案例2
        */
       console.log(Object instanceof Function); // true
       console.log(Object instanceof Object);
       console.log(Function instanceof Function);
       console.log(Function instanceof Object);

       function Foo() {}
       console.log(Object instanceof Foo);

执行上下文与执行上下文栈

变量提升与函数提升

1. 变量声明提升

通过var定义（声明）的变量，在定义语句之前可以访问到
值：undfined

2. 函数声明提升

通过function声明的函数，在之前就可以直接调用
值：函数定义（对象）

3. 问题：变量提升和函数提升是如何产生的？

执行上下文

1. 代码分类（位置）

全局代码
函数（局部）代码

2. 全局执行上下文

在执行全局代码前将window确定为全局执行上下文
对全局数据进行预处理

  • var定义的全局变量==>undefined，添加为window的属性
  • function声明的全局函数==>赋值（fun），添加为window的方法
  • this==>赋值（window）

开始执行全局代码

3. 函数执行上下文

在调用函数，准备执行函数体之前，创建对应的函数执行上下文对象（虚拟的，存在于栈中）
对局部数据进行预处理

  • 形参变量==>赋值（参数）==>添加为执行上下文的属性
  • argyments==>赋值（实参列表），添加为执行上下文的属性
  • var定义的局部变量==>undefined，添加为执行上下文的属性
  • function声明的函数==>赋值（fun），添加为执行上下文的方法
  • this==>赋值（调用函数的对象）

开始执行函数体代码

本节代码：

// 全局执行上下文
        console.log(a1===window.a1);  
        a2();  
        console.log(a2()===window.a2());    
        console.log(this);
        var a1 = 3;
        function a2() {
            console.log('a2()');
        }
        console.log(a1);

        // 函数执行上下文
        function fn(a1) {
            console.log(a1);    // 2
            console.log(a2);    // undefined
            a3();               // a3()
            console.log(this);  // window
            // arguments形参列表
            console.log(arguments); // 伪数组（2，3）


            var a2 = 3;
            function a3() {
                console.log('a3()');
            }
        }
        fn(2,3)
        fn(1);

执行上下文栈

  1. 在全局代码执行前，JS引擎就会创建一个栈来存储管理所有的执行上下文对象
  2. 在全局执行上下文（window）确定后，将其添加到栈中（压栈）
  3. 在函数执行上下文创建后，将其添加到栈中（压栈）
  4. 在当前函数执行完后，将栈顶的对象移除（出栈）
  5. 当所有的代码执行完后，栈中只剩下window

执行上下文栈问题

1. 依次输出什么？

gb：undefined
fb：1
fb：2
fb：3
fe：3
fe：2
fe：1
ge：1

2. 整个过程中产生了几个执行上下文？

5

本节代码：

console.log("gb:" + i);
      var i = 1;
      foo(1);
      function foo(i) {
        if (i == 4) {
          return;
        }
        console.log("fb：" + i);
        foo(i + 1); // 递归调用：在函数内部调用自己
        console.log("fe:" + i);
      }
      console.log("ge：" + i);

面试题

/*
            测试题1：先执行变量提升，再执行函数提升
        */
      function a() {}
      var a;
      console.log(typeof a);    // 'function'

      /*
            测试题2
       */
      if (!(b in window)) {
        var b = 1;
      }
      console.log(b);   // undefined

      /*
            面试题3
      */
     var c = 1;
     function c(c) {
         console.log(c);
     }
     c(2);  // 报错 函数提升优先级高于变量提升，且不会被同名变量声明时覆盖，但是会被变量赋值后覆盖。

作用域与作用域链

作用域

1. 理解

就是一块"地盘"，一个代码段躲在的地域
它是静态的（相对于上下文对象），在编写代码时就确定了

2. 分类

全局作用域
函数作用域
没有块作用域（ES6有了）

3. 作用

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

在这里插入图片描述
本节代码：

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

        bar(100);
        bar(200);
      }
      fn(10);

作用域与执行上下文

1. 区别1

全局作用域之外，每个函数都会创建自己的作用域（n+1），作用域在函数定义时就已经确定了。而不是在函数调用时
全局执行上下文环境是在全局作用域确定之后, js代码马上执行之前创建
函数执行上下文环境是在调用函数时, 函数体代码执行之前创建

2. 区别2

作用域是静态的, 只要函数定义好了就一直存在, 且不会再变化
上下文环境是动态的, 调用函数时创建, 函数调用结束时上下文环境就会被自动释放释放

3. 联系

执行上下文环境(对象)是从属于所在的作用域
全局上下文环境==>全局作用域
函数上下文环境==>对应的函数使用域

在这里插入图片描述

本节代码：

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

        bar(100);
        bar(200);
      }
      fn(10);

      /*
   问题:
   1. 有几个作用域?
   2. 产生过几个上下文环境对象?
   */

作用域链

1. 理解

多个上下级关系的作用域形成的链，它的方法是从下向上的（从内到外）
查找变量时就是沿着作用域链来查找的

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

在当前作用域下的执行上下文中查找对应的属性，如果有直接返回，否则进入2
在上一级作用域的执行上下文中查找对应的属性，如果有直接返回，否则进入3
再次执行2的相同操作，直到全局作用域，如果还找不到就抛出找不到的异常

在这里插入图片描述

闭包

1. 如何产生闭包

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

2. 闭包到底是什么？

使用chrome调用查看
理解一：闭包是嵌套的内部函数（绝大部分人）
理解二：包含被引用变量（函数）的对象（极少数人）
注意：闭包存在于嵌套的内部函数中

3. 产生闭包的条件？

函数嵌套
内部函数引用了外部函数的数据（变量/函数）

常见的闭包

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

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

本节代码：

 function fn1() {
            // 1. 将函数作为另一个函数的返回值
            // 没有闭包的话，执行完fn1变量a就释放了，程序将会报错
            var a = 2;
            function fn2() {
                a++;
                console.log(a);
            }
            return fn2;
        }
        var f =  fn1();
        f();    // 3
        f();    // 4

        // 2. 将函数作为实参传递给另一个函数调用
        // 闭包条件： 有内部和外部函数，且内部函数引用了外部函数
        function showDelay(msg,time) {
            setTimeout(function(){
                alert(msg);
            },time)
        }
        showDelay('函数',2000);

闭包的作用

1. 使用函数内部的变量在函数执行后，仍然存活在内存中（延长了局部变量的声明周期）

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

问题：

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

本节代码：

function fn1() {

        var a = 2;
        function fn2() {
          a++;
          console.log(a);
        }
        function fn3() {
            a--;
            console.log(a);
        }
        return fn3;
      }
      var f = fn1();
      f(); // 3
      f(); // 4

闭包的生命周期

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

本节代码：

// 此时闭包就已经产生了（函数提升，内部函数对象已经创建了）
        var a = 2;

        function fn2() {    // 闭包执行完毕
          a++;
          console.log(a);
        }

        // var fn2 = function() {  // 定义完毕执行才算完毕
        //   a++;
        //   console.log(a);   
        // }   // 闭包执行完毕

        return fn2;
      }
      var f = fn1();
      f(); // 3
      f(); // 4
      f = null; // 闭包死亡（包含闭包的函数对象称为垃圾对象）

闭包应用_自定义JS模块化

闭包的应用2 ： 定义JS模块

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

本节代码：

function myModule() {
    // 私有数据
    var msg = 'My Nice boy';
    // 操作数据的函数
    function doSomething() {
        console.log('doSomething' + msg.toUpperCase()); // msg.toUpperCase() 将msg的字符都转为大写
    }
    function doOtherthing() {
        console.log("doDtherthing" + msg.toLowerCase()); // msg.toLowerCase 将msg的字符都转为小写
    }

    // 向外暴露对象（给外部使用的方法）
    return {
        doSomething: doSomething,
        doOtherthing: doOtherthing
    }
}

闭包的缺点及解决

  1. 缺点

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

  1. 解决

能不用闭包就不用
及时释放

内存溢出与内存泄漏

1. 内存溢出

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

2. 内存泄漏

占用的内存没有及时释放
内存泄漏积累多了就容易导致内存溢出
常见的内存泄漏

  • 意外的全局变量
  • 没有及时清理的计时器或回调函数
  • 闭包
// 1.内存溢出
      var obj = {};
      for (var i = 0; i < 10000; i++) {
        obj[i] = new Array(100000000);
      }

      // 2. 内存泄漏
        // 意外的全局变量
        function fn() {
            a = 3;
            console.log(a);
        }
        fn();

        var intervalId = setInterval(function () {   // 启动循环定时器后不清理
            console.log('----');
        },1000);

        clearInterval(intervalId);  // 清理定时器

        function fn1() {
            var a = 4;
            function fn2() {
                console.log(++a);
            }
            return fn2;
        }
        var f = fn1();
        f();

        // f = null; // 释放内存
昵称好帅
关注
专栏目录
JavaScript高级学习笔记（总结）
weixin_43294092的博客
04-16 1478
JavaScript简称:JS ​ * JS分三个部分: ​ * 1 ECMAScript标准—基础的语法 ​ * 2 DOM Document Object Model 文档对象模型 ​ * 3 BOM Browser Object Model 浏览器对象模型 ​ * 什么是JS? ​ * 是一门脚本语言 ​ * 是一门解释性语言 ​ * 是一门...
JS高级笔记
10-28
JS高级笔记，学习js的朋友可以参考下。
js js高级笔记
PrimaryColor
07-30 281
js高级 js变量提升和函数提升(预解析) 如果通过var声明变量: 如果一个声明的变量在函数体内，那么它的作用域就是函数内部。如果是在全局环境下声明的，那么它的作用域就是全局 ES6之前没有块级作用域，只有函数作用域和全局作用域，ES6中提供了块级作用域 函数内部的变量会被提升到函数的头部，函数在解析执行的时候，先进行变量声明处理，然后在运行函数内部的代码 函数内部如果没有变量声明，那么该变量就是全局变量(如果函数内部没有var，该变量就是全局变量) 变量和赋值语句一起书写，在js引擎解析时，会将其
js高级笔记
Ain_z的博客
09-11 372
JS高级笔记 JS高级第一天 1-面向对象介绍 面向对象 : 面向对象是一种解决问题的思维方式 面向对象 : 注重的是结果 面向过程 : 注重的是过程 面向对象本质 : 面向过程的封装 (1)以前思维方式：面向过程 -> 注重的是过程 (2)面向对象思维方式 -> 注重的是结果 2-面向对象编程 // 面向过程 : 注重的是过程 // 弊端 : (1)代码冗余 (2)不便于维护 // 使用函数封装 // 好处: 解决代码冗余 //弊端： 全局变量污染 （全局变量重复设置导致覆
javascript高级学习笔记整理
12-04
本文将深入探讨JavaScript的一些高级特性，包括面向对象的实现、数据类型以及复杂类型。 首先，我们来看JavaScript中的面向对象实现。在提供的代码示例中，`Person` 和 `Student` 是两个示例函数，它们作为构造函数...
JavaScript高级 笔记
踩的坑越多，经验越多
09-16 3027
JavaScript高级 学习笔记总结
JavaScript 高级笔记
qq_43645678的博客
10-07 712
JavaScript高级笔记
JS高级学习笔记
qq_56088882的博客
08-23 212
JS高级学习笔记。
js高级笔记-1
Mllmlu的博客
04-09 140
js的组成 1.DOM-----操作标签 2.BOM-----操作浏览器 3.ECMAScript-----语法类：函数，对象… *js不是面向对象，基于对象 函数的作用 具有封装性 基本对象的创建 var student={ name:'王大陆', age:25, eat:function(){ console.log('晚上吃点什么'); } } console.log(student); student.eat(); 工厂的方式创建对象 // 工厂的方式创建对象-----相当于是用函数封
js高级学习笔记
litcangosh的博客
09-08 175
面向对象的编程思想 面向过程:凡事都是亲力亲为,所有的代码都要自己写,每一步都要很清楚,注重的是过程 面向对象的编程思想:根据需求,分析对象,找到对象有什么特征和行为,通过代码的方式来实现需求,要想实现这个需求,就要创建对象,要想创建对象,就应该先有构造函数,然后通过构造函数来创建对象.,通过对象调用属性和方法来实现相应的功能及需求,即可。 原型定义 1.定义 构造函...
js高级学习笔记（一）
h_cjj的博客
06-07 669
面向对象的三大特性、创建对象的方式、原型、原型链和一些零散的知识点
JS高级课堂笔记
木木木森林
08-24 1718
原型链继 数据的特点： 可传递。var a = 3; var b = a; 可运算。var a = 3; var b = a + 2; 问题：var a = xxx;，a 内存中到底保存的是什么？ xxx是基本数据，保存的就是这个数据。 xxx是对象，保存的是对象的地址值。 xxx是一个变量，保存的xxx的内存内容(可能是基本数据，也可能是地址值)。 关于引用变量的赋值问题： 两个或多个引用变量指向同一个对象，通过一个变量修改对象内部数据，其他所有变量看到的是修改之后的数据。 两个或多个
JavaScript 高级编程学习笔记（一）
Vinc_chen的博客
11-20 149
函数 arguments 保存所有传递给函数的实参的伪数组。 function Sum(){ let result = 0; // 利用 for 循环遍历 arguments 伪数组 for(let i = 0; i < arguments.length; i++) result += arguments[i]; return result; } console.log(Sum(10, 20, 30)); /* [output]: 60 */ 利用ES6扩展运算符替代 arg
Ajax与JavaScript高级程序设计笔记详解
"Ajax高级笔记JavaScript高级程序设计笔记主要涵盖了Ajax技术的高级应用以及JavaScript的高级编程技巧。本文档旨在帮助开发者深入理解Ajax的核心机制，包括XMLHttpRequest对象的使用，以及如何在各种浏览器环境中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值