day25 - 闭包/继承

一、闭包

1.概念:

  • 定义在一个函数内部的函数(函数嵌套函数),闭包就是将函数内部和函数外部连接起来的一座桥梁。
  • 在一个自执行函数中套用另外一个函数。

2.特点:

  • 里面的小空间不销毁,延长了变量的生命周期
  • 变量声明在函数内部,保护了私有的变量不被全局污染,让数据更安全
  • 让全局可以访问到局部的数据了

3.缺点:

  • 常驻内存,增加内存使用量。
  • 内存不销毁,容易造成内存的溢出/内存泄漏。

闭包实现tab切换

//获取元素
const aBtn = document.querySelectorAll('button');
const aItem = document.querySelectorAll('.item');
let timer = null;
for (var i = 0; i < aBtn.length; i++) {
    //i:0 - aBtn.length
    (function(i) {
    //i:0 - aBtn.length
        aBtn[i].onmouseover = function() {
            timer = setTimeout(() => {
                for (var j = 0; j < aBtn.length; j++) {
                    aBtn[j].className = '';
                    aItem[j].style.display = 'none';
                }
                aBtn[i].className = 'active';
                aItem[i].style.display = 'block';
            }, 400);
        };
        aBtn[i].onmouseout = function() {
            clearTimeout(timer);
        }
    })(i);
}

二、原型链

概念:
实例对象与原型(prototype)的连接,依靠__proto__内置属性实现的。
// 每一个对象都有一个__proto__。
// JS在创建对象的时候,都有一个叫做__proto__的内置属性,用于指向创建它的函数对象的原型prototype

三、继承

子类继承父类,但不影响父类。

方法继承(原型继承)
方法继承1 - 浅拷贝:将prototype下面的方法一一赋值给子类。

for(var i in Person.prototype){
    Student.prototype[i] = Person.prototype[i]
}

Object.assign(Student.prototype, Person.prototype)

方法继承2 - 原型继承:将父类的实例给子类的原型。

Student.prototype = new Person(); //不但继承了Person.prototype的方法,同时修改了子类的构造函数体。
Student.prototype.constructor = Student; //重新设置子类的构造函数体。

ES6中的继承:
extends关键字:
Class 可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。

super关键字:
子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类自己的this对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,加上子类自己的实例属性和方法。如果不调用super方法,子类就得不到this对象。

class Animal{
    constructor(name){
        this.name = name;
}
    dong(){
        console.log("能动");
    }
}
class Dog extends Animal{
    constructor(name){
        super(name);
        this.jiao = "汪汪";
    }
}
var ergou = new Dog("狗");
console.log(ergou); // Dog {name: "狗", jiao: "汪汪"}
ergou.dong(); // 能动
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值