js原型与原型链、闭包课堂笔记

最新推荐文章于 2022-06-06 21:31:25 发布

醉酒梦初醒

最新推荐文章于 2022-06-06 21:31:25 发布

阅读量151

点赞数

文章标签：原型模式 javascript 前端

本文链接：https://blog.csdn.net/m0_59248606/article/details/125152446

版权

一.原型与原型链

作用：1.实现了js的继承 2.可以给所有的类的实例添加公用方法和属性

概念：1.每个构造函数(类)都有一个显示原型prototype

<body>
    <p>显示原型的实战用法</p>
    <script>
        //字符串的构造函数是？String
        //数组的构造函数是?Array
        //1. 目标：给所有字符串实例添加一个翻转字符串方法
        //split 把字符串分割为数组，join把数组转换为字符串,reverse翻转数组
        String.prototype.reverse = function(){
            //this指向实例
            return this.split('').reverse().join('');
        }
    </script>
</body>

2.每个实例(对象)都有一个隐式原型__proto__

3.对象的隐式原型__proto__等于其构造函数(类)的显示原型prototype

4.当查找对象的属性或方式，现在自身上找，找不到则沿着原型的原型(__proto__,__proto__)向上查找

5.我们把原型的原型形式的链条关系称之为原型链

<body>
    <h1>如何创建一个对象</h1>
    <p>创建对象：1.字面量，2.new一个</p>
    <script>
        //用字面量方式创建了一个对象实例
        var obj = {name:"mumu",age:18};
        console.log(obj);

        // new WOW().init()
        // new Date()
        //创建一个动物类(用函数的方式)
        function Animal(name,age){
            this.name = name;
            this.age = age;
        }
        //我们可以把每一个实例的公用方法，写在构造函数（类）的显示原型prototype上
        Animal.prototype.say = function(){
            alert(`大家好我都名字是${this.name},今年${this.age}岁`)
        }
        //写一个student类继承Animal
        function Student(name,age,no){
            //this指向的student new出来的实例
            //实现了对Animal构造函数的继承
            Animal.call(this,name,age);
        }
        //实现对原型的继承 Object.Create 从现有的对象创建一个新的对象
        Student.prototype = Object.create(Animal.prototype);
        //修改实例的构造函数
        Student.prototype.constructor = Student;
        //添加Student实例的公用方法 study学习
        Student.prototype.study = function(){
            alert(`大家好我是${this.name},我正在努力学习前端`);
        }
        //创建2个学生实例
        var s1 = new Student("小明",17,"001");
        var s2 = new Student("小刚",22,"004");


        // var a1 = new Animal("小黄",3);
        // var a2 = new Animal("小花",4)
        //Animal 是构造函数 和普通函数的区别指向前加new关键字
        //a1，a2是实例对象
        //Animal中的this指向的是其对应的实例
        //say方法是a1，a2实例的公用方法
        //每一个对象实例都有一个隐式原型__proto__,等于其构造函数的显示原型
        //有什么呢？js的原型作用实现的"继承"
        //当查找一个对象的属性，方法时候：先在自身上找，找不到这沿着原型向上查找
        //我们把原型的原型形成的链条关系叫原型链


     </script>
</body>

二.闭包

作用：1.创建局部作用域；2.在函数外部访问函数内部的局部变量；3.封装组件与插件

特点：函数嵌套函数：函数作为返回值被返回，函数作为参数被传入

缺点：闭包中的自由变量不会被自动销毁，会常驻内存，使用不当容易造成内存泄漏

<body>
    <h1>闭包</h1>
    <p>闭包：函数嵌套函数，函数作为参数被传入，函数作为返回值被返回</p>
    <p>闭包作用：创建局部变量，可以封装组件或插件；函数外部访问函数内部的局部变量</p>
    <p>闭包特点：闭包中的局部变量不会被销毁，使用不当容易造成内存泄漏</p>
    <script>
        //函数作为返回值被返回，形成闭包
        // function outer(){
        //     var a = 100;
        //     return function(){
        //         a++;
        //         console.log(a);
        //     }
        // }
        // var inner = outer();
        // inner();
        //1.a会常驻内存，不会被销毁；可以在outer的外部访问a(自由变量)

        var b = 100;
        function fn(){
            b++;
            console.log(b);
        }
        function outer(callback){
            var b = 500;
            callback();
        }
        outer(fn);
        //2.闭包中的自由变量，是在函数定义时候确定的，不是执行的时候
        //2.闭包中的自由变量不会销毁
    </script>
</body>

考点：闭包中的自由变量（在该作用域没有定义就使用的变量）在函数定义时候确定的，不是函数执行时候确定的