闭包和继承（javascript）

最新推荐文章于 2022-04-13 21:21:51 发布
最新推荐文章于 2022-04-13 21:21:51 发布
阅读量176 收藏 1
点赞数
分类专栏： 我的沙雕笔记 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44210475/article/details/109297631
版权

闭包和继承



闭包

先不急着定义：


假设我们要做银行系统：


方案一：

var money =100;
money -=10;
console.log(money);

这样写有一个坏处：变量在全局是容易被覆盖的（全局污染）；



改进：我们放在局部中

function fn(){
    var money =100;
}

这种情况下我们消费不了（全局无法操作局部变量）。


改进：

function fn(){
    var money = 100;
    return money;
}
var m = fn();
console.log(m);//查询余额

查询和消费：

//消费和查询
function fn(handler,num){
    var money =100;
    if(handler=="消费"){
        money -=num;
    }
    return money;
}
console.log(fn());
console.log(fn("消费",10));
console.log(fn());//消费完又变成100了

局部操作不行，每次查询都是最初始的值


改进：放在局部的局部

function fn(){
    var money =100;
    function fun(handler,num){
        if(handler=="消费"){
            num -=num;
        }
        return money;
    }
     return fun();
}
//查询余额
var m = fn();
console.log(m);

消费不了，调用不了局部函数（下面小改进，将局部返回值改为函数）：

function fn(){
    var money =100;
    function fun(handler,num){
        if(handler=="消费"){
            num -=num;
        }
        return money;
    }
     return fun;
}
//改版后查询
var m =fn();
var yue = m();
console.log(yue);
//消费
m('消费',10);
console.log(yue);
//再查询
var yue = m();
console.log(yue);

90，没变成100；因为我们没有调用fn初始化money，一直调用fun



闭包：闭包就是能够读取其他函数内部变量的函数。

总结上面式子，得出闭包的形成条件：大函数返回了一个小函数，小函数使用了大函数的变量



闭包变量的特点：

//未闭包
function ax(){
    var a =1;
    a++;
    return a;
}
console.log(ax());
console.log(ax());
console.log(ax());
console.log(ax());
//都是2，每次运行a都是1，并且a执行完就销毁




//闭包：
//闭包
function big(){
    var a = 1;
    function small(){
        a++;
        return a;
    }
    return small;
}
var  f = big();
console.log(f());
console.log(f());
console.log(f());
console.log(f());
console.log(f());
//不断累加,a的空间没有销毁

闭包的特点：

  1. 变量生命周期变长了
  2. 内部的局部空间没有销毁（一直不销毁内存溢出）
  3. 变量私有化（保护变量不被全局污染）
  4. 全局可以访问并操作局部变量



闭包案例：星星评分

1
2
3
4

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>

<body>
    <img src="./rank_3.gif" alt=""><img src="./rank_4.gif" alt="">
    <img src="./rank_3.gif" alt=""><img src="./rank_4.gif" alt="">
    <img src="./rank_3.gif" alt=""><img src="./rank_4.gif" alt="">
    <img src="./rank_3.gif" alt=""><img src="./rank_4.gif" alt="">
    <img src="./rank_3.gif" alt=""><img src="./rank_4.gif" alt="">
</body>
<script>
    var imgs = document.querySelectorAll("img");


    for (var i = 0; i < imgs.length; i++) {
        imgs[i].onmouseover = fn(i);  //第一层函数  
    //以前的写法
    /* function (){imgs[i].οnmοuseοver=function(){console.log(i)}都是10
    

        (function(i){
             局部作用域中有i,和下面的闭包是一样的,变量不会被覆盖
            imgs[i].onmouseover = function(){
                console.log(i);
            }
        })


     */
    }
    function fn(i) {//相当于执行了很多次，每次都有自己的作用域，闭包的好处（i一直活着，不会像之前一样死掉）
        return function () {//第二层函数，形成闭包
            //console.log(i);
            for (var j = 0; j <= i; j++) {
                if (j % 2 == 0) {
                    imgs[j].src = "./rank_1.gif";
                } else {
                    imgs[j].src = "./rank_2.gif";
                }
            }
            for (var j = i+1; j < imgs.length; j++) {
                if (j % 2 == 0) {
                    imgs[j].src = "./rank_3.gif";
                } else {
                    imgs[j].src = "./rank_4.gif";
                }
            }
        }
    }
</script>

</html>





继承的概念

一个对象想要另一个对象的属性和方法，就继承另一个对象


俗称换爸爸。

function Animal(){
    this.tui = "2条腿";
}
function Person(){
    this.tedian="能思考";
}
var a = new Animal();
console.log(a);
var zhangsan = new Person();
console.log(zhangsan);


//希望张三属于动物，自动具有两条腿（张三拥有a的特点：属性）
console.log(zhangsan.tui);//undefined，对象里面没有就是undefined


//换原型（换爸爸，原型继承，给原型赋值）
zhangsan.__proto__ =a;
console.log(zhangsan);
console.log(zhangsan.tui);



原型继承

    function ChengLong(){
        this.money = '1000000000000';
    }
    function FanBingBing(){
        this.meise ="美";
    } 
    var cl = new ChengLong();
    console.log(cl);
    var fbb = new FanBingBing();
    console.log(fbb);

//fbb想要cl的钱就需要认他做爸爸
fbb.__proto__ = cl;

原型继承：利用构造函数将原型改成想要的对象

FanBingBing.prototype=cl;

console.log(fbb);



再举个例子：

   function Animal (name,age){
        this.tui = '2条腿',
        this.name = name;
        this.age = age;
    }
    function Person(){
         
    }
  Perosn.prototype = new Animal();
    var man = new Person();
    console.log(man);

继承的缺点：无法动态的给父元素添加属性和方法

推荐的继承缺点链接：点击跳转

下面是引用上面链接的内容

  1. 引用值共享
因为使用的是同一个原型，只要一个修改了原型的值，
那么另一个引用原型的值也会随着更改
  1. 不能传参
Parent.prototype.grand = 'grand';

function Parent (name) {
     this.name = name || 'parent';
     this.color = ['red', 'orange', 'yellow'];
 }

 function Child () {

 }

 Child.prototype = new Parent();
 var child1 = new Child('child1');
 var child2 = new Child('child2');


上面传过去的child1,child2全部没用，都输出parent





上下文调用模式继承（借用函数继承）

function Animal (name,age){
        this.tui = '2条腿',
        this.name = name;
        this.age = age;
    }
    function Person(name,age){
        //animal相当于调用了，调用就会执行里面代码 
        /* 
        this.tui="两条腿",
        this.name = name,
        this.age = age,
        中this被call给改了，改成当前构造函数中的this,man
        */
         Animal.call(this,name,age);
    }

Animal.prototype.eat =function(){
    console.log(this,name,age);
}
    

    //上下文调用模式解决原型继承的缺点 
    Person.prototype = new Animal();
    var man = new Person("张三",12);
    console.log(man);
    console.log(man.eat())

解决了原型继承的引用值和不能传参问题
缺点：

  1. 继承不了原型的原型的方法
  2. 多执行了一次call

参考链接:点击参考好文链接，里面解释非常详细





解决方案：混合继承（原型继承+上下文调用模式继承）

function Animal(name,age){
    this.tui = "2条腿",
    this.name = name;
    this.age = age
}
Animal.prototype.eat=function(){
    console.log("动物方法：看到人看不到的东西");
}
function Person(name,age){
//再上下文调用模式继承
Animal.apply(this,[name,age]);
}

//先原型继承
Person.prototype = new Animal();
var p = new Person("张三",12);
console.log(p.eat())

还剩下几种没有介绍感兴趣点击链接查看:点击此处跳转








es6的class语法

类：抽象的对象

对象：万物皆对象


在初中还是高中生物里面说过：什么什么属于什么科，属之类的话（记不太清了）

拿豌豆举例子，豌豆是对象，属于豌豆属（类）。豌豆是具体的东西，但是豌豆属是将豌豆的特征集合起来的一个定义。你可以根据豌豆属知道豌豆大致具备什么信息。

老例子了：人是对象，但人类不是具体的事物，是人的概念（从人身上抽象出来的）



代码中：

对象 = new 构造函数;

构造函数又叫做类，es6中专门提供了一个语法，专门用来定义类，叫做class

//之前的面向对象写法
function Person() = {
    this.name="张三"
}
var p = new Person();//new 操作叫做实例化
console.log(p);





//es6的面向对象
class Person {//定义好的类是专门用来实例化对象的
//如果要设置这个类中出来的属性----定义一个特殊固定方法：constructor(){}
constructor(name) {
   //new 的时候就是在执行这个constructor 
    this.name =name;
    //所有属性必须写在这个方法中
}
//定义方法
eat(){
    console.log("吃月饼");
}
}
var p = new Person("张三");
console.log(p);
p.eat();

以后面向对象的格式：

class 类{
    constructor(){
        this.属性名=值
    }
    方法名(){

    }
}






es6面向对象版轮播图

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面向对象版轮播图</title>
</head>
<style>
    ul,
    ol {
        list-style: none;
    }

    .box {
        width: 500px;
        height: 300px;
        margin-left: 20px;
        position: relative;
    }

    * {
        margin: 0;
        padding: 0;
    }

    ul {
        width: 500px;
        height: 300px;
        border: 1px solid red;

    }

    ul li {
        display: none;
    }

    ul li.active {
        display: block;
    }

    ul li a img {
        width: 500px;
        height: 300px;
    }

    a {
        text-decoration: none;
        color: black;
        font-size: 30px;
    }

    ol {
        width: 200px;
        height: 26px;
        position: absolute;
        background-color: green;
        border-radius: 26px;
        left: calc(50% - 100px);
        bottom: 20px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    ol li {
        background-color: gray;
        width: 26px;
        height: 26px;
        border-radius: 26px;
    }

    ol li.active {
        background-color: red;
    }

    .left,
    .right {
        position: absolute;
        left: 0;
        top: calc(50% - 13px);
        height: 50px;
        width: 30px;
        background-color: rgba(0, 0, 0, .5);
        text-align: center;
        line-height: 50px;
    }

    .right {
        left: calc(100% - 28px);
    }
</style>

<body>
    <div class="box">
        <ul>
            <li class="active"><a href="#"><img
                        src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2493695704,2540399818&fm=26&gp=0.jpg"
                        alt=""></a></li>
            <li><a href=""><img
                        src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1242578728,2152118644&fm=26&gp=0.jpg"
                        alt=""></a></li>
            <li><a href=""><img
                        src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3213912571,2486886761&fm=26&gp=0.jpg"
                        alt=""></a></li>
        </ul>
        <ol>
            <li class="active"></li>
            <li></li>
            <li></li>
        </ol>
        <a href="javascript:;" class="left">&lt;</a>
        <a href="javascript:;" class="right">&gt;</a>
    </div>

</body>
<script>
    class Carousel {
        constructor(classname) {
            //在这里写的东西其实就是之前在构造函数中写的东西
            this.box = document.querySelector("." + classname);
            this.ulis = this.box.querySelectorAll("ul li ");
            this.olis = this.box.querySelectorAll("ol li ");
            this.leftBtn = this.box.querySelector("a.left");
            this.rightBtn = this.box.querySelector("a.right");
            this.index = 0;
            this.timerId = null;
        }
        init(){
            this.rightBtn.onclick = function () {
                this.rightMove();
            };
            this.rightBtn.onclick = () => {
                this.rightMove();
            };
            this.leftBtn.onclick = () => {
                this.leftMove();
            };
            for (let i = 0; i < this.olis.length; i++) {
                this.olis[i].onclick = () => {
                    this.dotMove(i);
                }
            };
            this.autoMove();
            this.box.onmouseover=()=>{
                clearInterval(this.timerId);
            };
            this.box.onmouseout=()=>{
                this.autoMove();
            };
        }
        autoMove() {
            this.timerId = setInterval(() => {
                this.rightMove()
            }, 2000)
        };
        rightMove() {
            this.index++;
            if (this.index == this.ulis.length) {
                this.index = 0;
            }
            this.move();
        }
        leftMove() {
            this.index--;
            if (this.index < 0) {
                this.index = this.ulis.length - 1;
            }
            this.move();
        }
        dotMove(i) {
            this.index = i;
            this.move();
        }
        move() {
            for (var i = 0; i < this.ulis.length; i++) {
                this.ulis[i].style.display = "none";
                this.olis[i].style.backgroundColor = "gray";
            }
            this.ulis[this.index].style.display = "block";
            this.olis[this.index].style.backgroundColor = "red";
        }
    }
    var c = new Carousel("box");
    c.init();
</script>

</html>

init不是强求这么写的，但是为了显得专业还是这么写吧。






ES6的继承

class Animal{
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
    eat(){
        console.log("吃月饼");
    }
}
//es6中的继承使用extends关键字 
/* 
子类 extends 父类

*/
class Person extends Animal{
    //se6中继承，子类里面的 constructor的第一行必须调用一个函数叫super
    constructor(name,age){
        super(name,age);//super其实就是在调用父类animal的constructor
    }
}
var p = new Person("张三",12);//new 其实就是在执行constructor
console.log(p);
芜湖上匠
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript闭包
12-21
Javascript中有几个非常重要的语言特性——对象、原型继承、闭包。其中闭包 对于那些使用传统静态语言C/C++的程序员来说是一个新的语言特性。本文将以例子入手来介绍Javascript闭包的语言特性，并结合一点 ...
闭包和继承
weixin_46370310的博客
03-23 165
一、闭包 1、函数的执行空间 function fn(){ console.log("fn函数") } fn(); 函数执行的时候会开辟一个执行空间(我们暂且叫他 xxff00 )。console.log(我是fn函数’)这个代码就是在xxff00这个空间中执行。代码执行完毕以后,这个xxff00空间就销毁了。fn内部局部变量的生命周期：作用域开始的位置被声明，结束的位置被删除（感觉像朝...
继承和闭包
D____ppx的博客
04-13 194
继承 子类继承父类 可以拥有父类的方法及属性 这个称为继承 继承的使用 1.使用extends来实现继承（es6的class） // 继承 class类 的继承 extends继承关键词 class Person{ constructor(){ //构造函数 this.name = '张三' this.eat = function(){ console.log('干饭'); } } } class Studen...
闭包与继承
FNbugE的博客
09-09 208
1.什么是闭包？ 闭包的概念：闭包就是函数嵌套时，让局部变量变成自由变量的环境，是一种让局部变量进化的方式 定义在一个函数内部的函数 垃圾回收机制：用过一次的东西，先放在一个内存中，不立即删掉，可以随时进行还原或再次使用，直到没有任何作用的时候再清除 如家用电器，电脑回收站 2.闭包的应用场景 一、for循环之中： for循环之中的i变量会因为for的循环次数被覆盖，所以在...
JavaScript的模块化:封装(闭包),继承(原型) 介绍
10-27
在复杂的逻辑下， JavaScript 需要被模块化，模块需要封装起来，只留下供外界调用的接口。闭包是 JavaScript 中实现模块封装的关键，也是很多初学者难以理解的要点
JavaScript 高级篇之闭包、模拟类,继承（五）
10-28
总结，闭包、模拟类和继承是JavaScript中实现复杂功能的关键概念。闭包提供了一种封装变量和行为的方式，模拟类和继承则帮助我们构建可复用的代码结构，实现面向对象的设计。通过深入理解这些概念，开发者可以更好地...
深入理解javascript原型和闭包1
最新发布
08-04
至此，我们讨论了JavaScript中一些核心的概念，包括对象、函数、原型、继承、执行上下文、作用域和闭包。理解这些概念对于深入掌握JavaScript至关重要。 （17）——补this `this`的绑定策略在JavaScript中比较复杂...
JavaScript闭包的底层运行机制
02-20
我研究JavaScript闭包（closure）已经有一段时间了。我之前只是学会了如何使用它们，而没有透彻地了解它们具体是如何运作的。那么，究竟什么是闭包？Wikipedia给出的解释并没有太大的帮助。闭包是什么时候被创建的，...
javascript知识点（五）之 闭包和继承
hlyphard的博客
03-29 291
1，什么是闭包：        闭包就是能够读取其他函数内部变量的函数。在js中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解为“定义在一个函数内部的函数”。2，闭包的特点：        1），可以读取函数内部的变量。        2），让这些变量的值始终保存在内存中。3，闭包的原理        理解闭包，首先必须理解js变量作用域。变量的作用域无非就是两种：全局变量和局部变...
继承丶闭包丶this指向
weixin_47735939的博客
11-24 129
es6中的class与继承 原型链: 每个构造函数都有一个prototype属性叫做显示原型 每个实例中都有一个__proto__属性叫做隐式原型 实例的隐式原型指向它的构造函数的显示原型 每个prototype原型都有一个constructor属性，指向它关联的构造函数。 获取对象属性时，如果对象本身没有这个属性，那就会去他的原型__proto__上去找，如果还查不到，就去找原型的原型，一直找到最顶层(Object.prototype)为止。Object.prototype对象也有__proto__属性值
day45-闭包和继承
HAI6545的博客
01-20 475
闭包和继承 闭包 如果让我们去开发一个银行账户的系统，账户的钱应该怎么用程序实现呢？ 我们首先想到，应该存在变量中。然后我们可以访问到这个变量的值（查询余额）、进行加法运行（存钱）、减法运算（取钱）。。。 是很方便，但问题也随之而来：放在全局中的变量，是任何人都能访问到的，那就是任何人都能进行修改，这样对于账户来说是很不安全的。所以我们将这个变量放在局部，局部变量在全局中访问不到，是很安全，要想访问这个局部变量，我们只能将这个局部变量作为函数的返回值，如下： function account()
前端面试题（JavaScript基础篇）
熊猫的博客
02-16 3035
JavaScript基础篇共有面试题62道 1、介绍JavaScript的基本数据类型？ 基本数据类型：Number、String、Boolean、Null、Undefined object是JavaScript中所有对象的父对象 数据封装类对象：object、Array、Boolean、Number、String 其它对象：Function、Arguments、Math、Date、Error、RegExp 其它数据类型：Symbol 2、浅谈JavaScript中
实现javaScript对象的"继承"的两种方法(prototype与闭包)
不能说的秘密的博客
02-28 2399
实现javaScript对象的"继承"的两种方法(prototype与闭包)
深入理解JavaScript原型和闭包的核心机理
"深入理解javascript原型和闭包" javascript作为一门编程语言，具有许多独特的特性，其中原型和闭包是两大核心概念，对于理解javascript的工作机制和编程思想具有重要影响。本文将深入探讨javascript原型和闭包的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值