JS高级（2）

已于 2022-02-20 13:13:27 修改
阅读量321 收藏
点赞数
文章标签： javascript 原型模式 开发语言
于 2022-02-20 13:12:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_60179418/article/details/123021964
版权

目录

函数高级

原型与原型链

原型

显示原型与隐式

原型

原型链

原型链的属性问题

instanceof

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

变量提升与函数提升

执行上下文

执行上下文栈

作用域与作用域链

作用域

作用域与执行上下文

作用域链

闭包

常见闭包

闭包的作用

闭包的生命周期

闭包的应用

闭包的缺点及其解决方法

对象高级

对象创建模式

Object构造函数模式

对象字面量模式

工厂模式

自定义构造函数模式

构造函数+原型的组合

继承

原型链继承

借用构造函数继承

原型链+借用构造函数的组合继承

函数高级

原型与原型链

原型

  • 函数的prototype属性

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

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

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

 <script type="text/javascript">
        //每个函数都有一个prototype属性，它默认指向一个Object空对象（即：称为原型对象）
        console.log(Date.prototype,typeof Date.prototype);
        function Fun (){
        }
        console.log(Fun.prototype);//默认指向一个Object空对象（没有我们定义的属性）
        //原型对象中有一个属性constructor，它指向函数对象
        console.log(Date.prototype.constructor===Date);
        console.log(Fun.prototype.constructor===Fun);
        //给原型对象添加属性（一般方法）===>实例对象可以访问
        Fun.prototype.test = function(){
            console.log("test()");
        };
        var fun = new Fun();
        fn.test();
    </script>

显示原型与隐式

原型

  • 每个函数function都有一个prototype，即显示原型（属性）
  • 每个实例对象都有一个_proto_，可称为
  • 隐式原型（属性）
  • 对象的隐式原型的值为其对应构造函数的显示原型的值
  • 函数的prototype属性：在定义函数时自动添加的，默认值是一个空的Object对象
  • 对象的_proto_属性：创建对象时自动添加的，默认值为构造函数的prototype属性值
 <script type="text/javascript">
        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.__proto__ === Fn.prototype);  //true
        //给原型添加方法
        Fn.prototype.test = function () {
            console.log('test()');
        };
        //通过实例调用原型方法
        fn.test();
    </script>

原型链

又称为隐式原型链，作用：查找对象的属性（方法）

访问一个对象的属性时，先在自身属性中查找，找到返回；如果没有，在沿着_proto_这条链向上查找，找到返回；如果最终没找到，返回undefined

  • 函数的显示原型指向的对象默认是空Object实例对象（但Object不满足）
  • 所有函数都是Function的实例（包含Function）
  • Object的原型对象是原型链尽头
<script type="text/javascript">
    // console.log(Object)
    //console.log(Object.prototype)
    console.log(Object.prototype.__proto__);
    function Fn() {
        this.test1 = function () {
            console.log('test1()');
        };
    }
    console.log(Fn.prototype);
    Fn.prototype.test2 = function () {
        console.log('test2()');
    };
    var fn = new Fn();
    fn.test1();
    fn.test2();
    console.log(fn.toString());
    console.log(fn.test3);
    // fn.test3()  undefined
    /*
    函数的显示原型指向的对象默认是空Object实例对象(但Object不满足)
     */
    console.log(Fn.prototype instanceof Object); // true
    console.log(Object.prototype instanceof Object);// false
    console.log(Function.prototype instanceof Object); // true
    /*
    所有函数都是Function的实例(包含Function)
    */
    console.log(Function.__proto__===Function.prototype);//true
    /*
    Object的原型对象是原型链尽头
     */
    console.log(Object.prototype.__proto__); // null
</script>

原型链的属性问题

  • 读取对象的属性值时，会自动到原型链中查找
  • 设置对象的属性值时，不会查找原型链，如果当前对象中没有此属性，直接添加此属性并设置其值
  • 方法一般定义在原型中，属性一般通过构造函数定义在对象本身上
<script type="text/javascript">
    function Fn(){
    }
    Fn.prototype.a = 'xxx';
    var fn1 = new Fn();
    console.log(fn1.a);
    var fn2 = new Fn();
    fn2.a = 'yyy';
    console.log(fn1.a,fn2.a);//xxx,yyy
</script>

instanceof

  • instanceof是如何判断的？

表达式：A instanceof B

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

  • Function是通过new自己产生实例
<script type="text/javascript">
    /*
    案例1
     */
    function Foo() {  }
    var f1 = new Foo()
    console.log(f1 instanceof Foo) // true
    console.log(f1 instanceof Object) // true
    /*
    案例2
     */
    console.log(Object instanceof Function) // true
    console.log(Object instanceof Object) // true
    console.log(Function instanceof Function) // true
    console.log(Function instanceof Object) // true
    function Foo() {}
    console.log(Object instanceof  Foo) // false
</script>

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

变量提升与函数提升

  • 变量声明提升

值：undefined

通过var定义的变量，在定义语句之前就可以访问到

  • 函数声明提升

值：函数定义（对象）

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

  • 先执行变量提升，再执行函数提升
<script type="text/javascript">
    console.log('-----')
    /*
    题问: 输出 undefined
     */
    var a = 3
    function fn () {
        console.log(a)
        var a = 4
    }
    fn() //undefined
    console.log(b) //undefined  变量提升
    fn2() //可调用  函数提升
    fn3() //不能  变量提升
    var b = 3
    function fn2() {
        console.log('fn2()')
    }
    var fn3 = function () {
        console.log('fn3()')
    }
</script>

执行上下文

  • 代码分类（位置）

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

  • 全局执行上下文

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

2.对全局数据进行预处理

var定义的全局变量：undefined，添加为window的属性

function声明的全局函数：赋值（fun），添加为window的方法

this：赋值（window）

3.开始执行全局代码

  • 函数执行上下文

1.在调用函数，准备执行函数之前。创建对应的函数执行上下文对象

2.局部数据进行预处理

形参变量：赋值（实参），添加为执行上下文属性

arguments：赋值（实参列表），添加为执行上下文属性

var定义的局部变量：undefined，添加为执行上下文的属性

function声明的函数：赋值（fun），添加为执行上下文的方法

this：赋值（调用函数的对象）

3.开始执行函数体代码

 <script type="text/javascript">
        //全局执行上下文
        console.log(a1);
        a2();
        var a1 = 3;
        function a2 (){
            console.log('a2()');
        }
        //函数执行上下文
        function fn(a1){
            console.log(a1);//2
            console.log(a2);//undefined
            a3();//a3()
            console.log(this);//window
            console.log(arguments);//2,3  伪数组(2,3)

            var a2 = 3;
            function a3(){
                console.log('a3()');
            }
        }
        fn(2,3);
</script>

执行上下文栈

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

作用域与作用域链

作用域

分类：全局作用域、函数作用域、没有块作用域（ES6有）

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

作用域与执行上下文

  • 区别一
  1. 全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定了，而不是在函数调用时
  2. 全局执行上下文是在全局作用域确定之后，JS代码马上执行之前
  3. 函数执行上下文是在调用函数时，函数体代码之前创建
  • 区别二
  1. 作用域是静态的，只要函数定义好了就一直存在，不会再变化
  2. 上下文环境是动态的，调用函数时创建，函数调用结束时上下文环境就会自动释放

联系

执行上下文（对象）是从属于所在的作用域

全局上下文环境：全局作用域

函数上下文环境：对应的函数使用域

作用域链

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

闭包

  • 如何产生闭包？

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

  • 闭包到底是什么？

闭包是嵌套的内部函数，闭包存在于嵌套的内部函数中

  • 产生闭包的条件

函数嵌套、内部函数引用了外部函数的数据、执行内部函数定义

常见闭包

  1. 将函数作为另一个函数的返回值
  2. 将函数作为实参传递给另一个函数调用
<script type="text/javascript">
        //将函数作为另一个函数的返回值
        function fn1 (){
            var a = 2;
            function fn2 (){
                a++;
                console.log(a);
            }
            return fn2;
        }
        var f = fn1();
        f();//3
        f();//4
        //将函数作为实参传递给另一个函数调用
        function showDelay (msg,time){
            setTimeout(function (){
                alert(msg);//闭包中有msg，没有time
            },time);
        }
        showDelay('xyy',2000);
</script>

闭包的作用

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

函数执行完后，函数内部声明的局部变量是否还存在？

一般是不存在的， 存在于闭包中的变量才可能存在

在函数外部能直接访问函数内部的局部变量吗？

不能，但可以通过闭包让外部操作它

闭包的生命周期

产生：在嵌套内部函数定义执行完时就产生了

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

闭包的应用

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

例如：

（一）

    <script type="text/javascript" src="myModule.js"></script>
    <script type="text/javascript">
        var myModule=myModule();
        myModule.doSomething();
        myModule.doOtherthing();
    </script>

myModule.js

function myModule (){
    var msg = 'My xyy';
    //操作数据的函数
    function doSomething () {
        console.log('doSomething()'+msg.toUpperCase());
    }
    function doOtherthing () {
        console.log('doOtherthing()'+msg.toLowerCase());
    }
    //向外暴露对象
    return {
        doSomething:doSomething,
        doOtherthing:doOtherthing
    }
}

（二）

    <script type="text/javascript" src="myModule2.js"></script>
    <script type="text/javascript">
        myModule2.doSomething();
        myModule2.doOtherthing();
    </script>

myModule2.js

(function () {
    var msg = 'My xyy';
    //操作数据的函数
    function doSomething () {
        console.log('doSomething()'+msg.toUpperCase());
    }
    function doOtherthing () {
        console.log('doOtherthing()'+msg.toLowerCase());
    }
    //向外暴露对象
    window.myModule2 = {
        doSomething:doSomething,
        doOtherthing:doOtherthing
    }
})()

闭包的缺点及其解决方法

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

解决方法：尽量不使用闭包；及时释放

对象高级

对象创建模式

Object构造函数模式

先创建空Object对象，再动态添加属性或方法

使用场景：起始时不确定对象内部数据

缺点：语句太多

<script type="text/javascript">
    /*
    一个人: name:"Tom", age: 12
     */
    // 先创建空Object对象
    var p = new Object()
    p = {} //此时内部数据是不确定的
    // 再动态添加属性/方法
    p.name = 'Tom'
    p.age = 12
    p.setName = function (name) {
        this.name = name
    }
    //测试
    console.log(p.name, p.age)
    p.setName('Bob')
    console.log(p.name, p.age)
</script>

对象字面量模式

使用 {} 创建对象，同时指定属性或方法

使用场景：起始时对象内部数据是确定的

缺点：如果创建多个对象，会出现重复代码

<script type="text/javascript">
    var p = {
        name: 'Tom',
        age: 12,
        setName: function (name) {
            this.name = name
        }
    }
    //测试
    console.log(p.name, p.age)
    p.setName('JACK')
    console.log(p.name, p.age)
    var p2 = {  //如果创建多个对象代码很重复
        name: 'Bob',
        age: 13,
        setName: function (name) {
            this.name = name
        }
    }
</script>

工厂模式

通过工厂函数动态创建对象并返回

使用场景：需要创建多个对象

缺点：对象没有一个具体的类型，都是Object类型

<script type="text/javascript">
        function createPerson(name,age){ //返回一个对象的函数==>工厂函数
            var obj = {
                name:name,
                age:age,
                setName:function(name){
                    this.name = name
                }
            }
            return obj;
        }
        //创建两个人
        var p1 = createPerson('Tom',12);
        var p2 = createPerson('Bob',13);
</script>

自定义构造函数模式

自定义构造函数，通过new创建对象

使用场景：需要创建多个类型确定的对象

缺点：每个对象都有相同的数据，浪费内存

<script type="text/javascript">
    //定义类型
    function Person(name, age) {
        this.name = name
        this.age = age
        this.setName = function (name) {
            this.name = name
        }
    }
    var p1 = new Person('Tom', 12)
    p1.setName('Jack')
    console.log(p1.name, p1.age)
    console.log(p1 instanceof Person)

    function Student (name, price) {
        this.name = name
        this.price = price
    }
    var s = new Student('Bob', 13000)
    console.log(s instanceof Student)
    var p2 = new Person('JACK', 23)
    console.log(p1, p2)
</script>

构造函数+原型的组合

自定义构造函数，属性在函数中初始化，方法添加到原型上

使用场景：需要创建多个类型确定的对象

<script type="text/javascript">
    function Person(name, age) { //在构造函数中只初始化一般属性
        this.name = name
        this.age = age
    }
    Person.prototype.setName = function (name) {
        this.name = name
    }

    var p1 = new Person('Tom', 23)
    var p2 = new Person('Jack', 24)
    console.log(p1, p2)
</script>

继承

原型链继承

套路：

  1. 定义父类型构造函数
  2. 给父类型的原型添加方法
  3. 定义子类型的构造函数
  4. 创建父类型的对象赋值给子类型的原型
  5. 将子类型原型的构造属性设置为子类型
  6. 给子类型原型添加方法
  7. 创建子类型对象，可以调用父类型的方法

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

<script type="text/javascript">
    //父类型
    function Supper() {
        this.supProp = 'Supper property'
    }
    Supper.prototype.showSupperProp = function () {
        console.log(this.supProp)
    }
    //子类型
    function Sub() {
        this.subProp = 'Sub property'
    }

    // 子类型的原型为父类型的一个实例对象
    Sub.prototype = new Supper()
    // 让子类型的原型的constructor指向子类型
    Sub.prototype.constructor = Sub
    Sub.prototype.showSubProp = function () {
        console.log(this.subProp)
    }

    var sub = new Sub()
    sub.showSupperProp()
    // sub.toString()
    sub.showSubProp()
    console.log(sub)  // Sub
</script>

借用构造函数继承

套路：

  1. 定义父类型构造函数
  2. 定义子类型构造函数
  3. 在子类型构造函数中调用父类型构造

关键：在子类型构造函数中通用cell()调用父类型构造函数

<script type="text/javascript">
    function Person(name, age) {
        this.name = name
        this.age = age
    }
    function Student(name, age, price) {
        Person.call(this, name, age)  // 相当于: this.Person(name, age)
        /*this.name = name
        this.age = age*/
        this.price = price
    }

    var s = new Student('Tom', 20, 14000)
    console.log(s.name, s.age, s.price)
</script>

原型链+借用构造函数的组合继承

  1. 利用原型链实现对父类型对象的方法继承
  2. 利用super()借用父类型构造函数初始化相同属性
<script type="text/javascript">
    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.price = price
    }
    Student.prototype = new Person() // 为了能看到父类型的方法
    Student.prototype.constructor = Student //修正constructor属性
    Student.prototype.setPrice = function (price) {
        this.price = price
    }
    var s = new Student('Tom', 24, 15000)
    s.setName('Bob')
    s.setPrice(16000)
    console.log(s.name, s.age, s.price)
</script>

____@
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js高级技术2
04-10
js高级技术2
JS常用的创建对象的方式
m0_57729518的博客
08-13 75
1、构造函数创建 function Person(name) { this.name = name; this.sayName = sayName; } var person1 = new Person('Jhonha'); 构造函数与其他函数的区别：唯一区别是调用的方式不同，只要通过new操作符调用的函数，那该函数就是构造函数 // 当作构造函数使用 var person = new Person("Jhonha", 27, "dancer"); person.sayNa
Js构造函数创建Person类
lcl123456m的博客
09-18 8014
1 /* * 创建一个构造函数，专门用来创建Person对象的 * 构造函数就是一个普通的函数，创建方式和普通函数没有区别, * 不同的是构造函数习惯上首字母大写 * * 构造函数和普通函数的区别就是调用方式的不同 * 普通函数是直接调用，而构造函数需要使用new关键字来调用 * * 构造函数的执行流程： * 1.立刻创建一个新的对象 * 2.将新建的对象设置为函数中this,在构造...
js第21天
weixin_61884985的博客
09-14 288
闭包是函数的一种高级使用方式，是javascript的语法现象，闭包形成后会生成一个不会被销毁的函数执行空间；柯里化（Currying）是一种关于函数的高阶技术。它不仅被用于 JavaScript，还被用于其他编程语言。继承是类与类之间的关系，子类继承父类子类就拥有父类的属性和方法
js中new一个实例对象的过程
qq_30136729的博客
04-03 2715
new操作符的作用： new操作符用于创建一个构造函数的实例对象。 function Person(name,age){ this.name = nage; this.age = age; } Person.prototype.sayName = function(){ console.log(this.name) } conste person1 = new Person('Tom',20); console.log(person1) //Person {name: "Tom", age: 20}
js 高级程序设计
02-27
JS高级程序设计,高清版PDF...《JavaScript高级程序设计》是2006年人民邮电出版社出版的图书，作者是(美)(Nicholas C.Zakas)扎卡斯。本书适合有一定编程经验的开发人员阅读，也可作为高校相关专业课程的教材。
JS高级 day2.zip
最新发布
12-21
我们还将学习如何使用流行的前端框架和工具，如React、Vue.js和Webpack等，来构建功能强大、响应迅速的现代化网页应用。 这个视频系列旨在帮助你掌握前端开发所需的技能，并能够在实际项目中应用所学的知识。每个...
JavaScript高级工程师学习资料
10-27
必须具备一定的js基础。提升自己的js能力，适合中高级前端开发阅读，作者6年以上的前端开发经验，深入理解js原理。只需要围绕着思维导图学习即可，不需要看N多个视频。
JS高级笔记
10-28
JS高级笔记，学习js的朋友可以参考下。
Js new一个函数和直接调用函数的区别
热门推荐
后端进阶
11-04 1万+
不实用new，也就是普通的函数调用而已，所以若是函数本身没有返回值，普通的函数调用没有什么意义 如： var person=new Person();//person是一个对象 var person = Person();//这只是一次普通的函数调用并赋值而已。 例一： function Person(name,age){ this.name=name; this.age=ag...
浅谈JavaScript new对象的四个过程
EmotionComputer
09-13 697
一. new对象： function Person(name, age) { this.name = name; this.age = age; } var person = new Person("Alice", 23); 二. new一个对象的四个过程： 1、创建一个空对象 var obj = new Object(); 2、让Person中的this指向obj，...
js中new关键字
weixin_43424101的博客
11-23 2296
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;script&amp
js 模拟实现new
zxl1990_ok的博客
04-02 1457
js 可以通过new操作符创建对象，包括以下4个步骤： ①. 创建一个新对象； ②. 将构造函数的作用域赋给新对象（this就指向了这个新对象）； ③. 执行构造函数中的代码（为这个新对象添加属性）； ④. 返回该新对象； function Person(name) { this.name = name; } Person.prototype.age = 28; Person.prototype...
理解JavaScript中的new操作符
qq_40905766的博客
04-02 105
1.知识储备 1.理解JS中的__proto__,prototype,constructor属性 2.理解Object.create()方法 2.举例 function Person(name){ this.name = name } var person = new Person('张三') console.log(person) // 输出Person {name:"张三"} 3.步骤解析 当执行new Person(‘张三’)时，经历了四个步骤 参考文档new-keyword-in-javascr
JavaScript的构造函数与原型继承
katherine5980的博客
03-14 543
1. JavaScript的构造函数 1.1 构造函数做了些什么 在JavaScript中，可以直接用new Object()或字面量{}创建对象，但是这样没有解决对象的标识问题（即新创建的对象是什么类型）。 可以使用构造函数和new操作符来创建特定类型的对象，构造函数也是函数，它与普通函数的区别就是调用方式不同——用 new 来调用，构造函数也可以被当作普通函数被直接调用或被call和apply，那个时候它就不是构造函数了。 如下图所示，创建Person的实例对象，需要要new操作符，在这个过程中
JavaScript创建对象的几种方式
m0_60935443的博客
07-11 538
ecma-262把对象定义为：“ 无序属性的集合，其属性可以包含基本值、对象、或者函数。”解释：对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字，而每个名字都映射到一个值。可以把对象想象成散列表，无非就是一组名值对，其中值可以是数据或函数。创建一个对象可以有如下方法： 根据引用类型——Object 创建一个对象，代码如下 早期的JavaScript开发人员经常使用跟这个模式创建新对象。后来对象字面量以其简洁直观的优势成为创建这种对象的首选模式。使用对象字面量创建对象，代码如下 虽然以上
js深入研究之Person类案例
weixin_33937913的博客
12-15 633
&lt;script type="text/javascript"&gt; /* 定义一个Person类 */ function Person(name, age) { this.name = name; this.age = age; } /* 添加两个方法getName getAge */ Person.prototype = { getName: functi...
JS new对象的三种方式
qq_37805832的博客
08-11 3065
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> //创建对象的方式(1) /*let obj=new Object(); obj.name="cyg"; obj.age=666; obj.say=func
JavaScript 高级语法
07-15
JavaScript作为一门动态、弱类型的脚本语言，具有一些高级语法和特性，下面是一些常见的JavaScript高级语法： 1. 闭包（Closures）：内部函数可以访问外部函数作用域中的变量。通过闭包，可以创建私有变量和方法。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值