js-25继承闭包及练习题

1.继承引入 - 是类与类之间的关系
      子类继承父类子类就拥有父类的属性和方法【重点】
2.es5:继承语法
  1.call函数继承-构造函数继承(继承属性)
      在子类的构造函数中使用  父类构造函数的call函数实现继承
      Person.call(this,name,age)  //构造函数继承
      原理: call函数改变this
  2.继承原型属性方法
       拷贝继承
       父类原型上的属性和方法复制拷贝到子类原型对象上
       遍历父类原型所有属性和方法，执行拷贝
    3.原型链实现原型对象属性和方法->原型继承
  4.构造函数继承+原型继承 = 组合继承
      子类继承父类属性和方法包括原型对象上的
3.es6:继承语法
  语法:
            class 父类{
                constructor(){
                }
            }
            class 子类  extends 父类{ //继承
                constructor(){
                    super() //调用父类构造器
                    //子类属性定义
                }
            }
            let 子类实例 = new 子类()

     //父类
        function Person(name, age) {
            this.name = name
            this.age = age
        }
        Person.prototype.say = function () {
            console.log(this.name, '说话');
        }
        let p1 = new Person('jack', 18)
        console.log(p1.name, p1.age);
        // p1.say()
        //子类
        function Student(name, age, num) {
            Person.call(this, name, age)  //构造函数继承
            this.num = num
        }
        // Student.prototype.say =  Person.prototype.say
        //拷贝继承
        for(let key in Person.prototype){
            Student.prototype[key] =  Person.prototype[key]
        }
        let s1 = new Student('jack', 18, 1001)
        console.log(s1.name, s1.age, s1.num);
        s1.say()
---------------------------------------------------------------------------
      //父类
        function Person(name, age) {
            this.name = name
            this.age = age
        }
        Person.prototype.say = function () {
            console.log(this.name, this.age,'说话');
        }
        //子类
        function Student(name, age, num) {
            Person.call(this, name, age)  //构造函数继承
            this.num = num
        }
        //原型链实现原型对象属性和方法->原型继承
        Student.prototype = new Person()
        let s1 = new Student('tom', 20, 1001)
        s1.say()
----------------------------------------------------------------------------
 class Person{
            constructor(name,age){
                this.name = name
                this.age = age
            }
            say(){
                console.log(this.name,this.age,'说话');
            }
        }
        // let p1 = new Person('jack',18)
        // p1.say()
        //子类Student继承父类Person
        // super()
        class Student extends Person{
            constructor(name,age,num){
                super(name,age)  //super表示调用父类构造器
                this.num = num
            }
        }
        let s1 = new Student('rose',20,1001)
        // console.log(s1.name,s1.age,s1.num);
        s1.say()

![函数不被销毁的执行空间](D:\周sir\课件\week6-jquery\函数不被销毁的执行空间.png)回顾函数
function fn(){
        }
let fn1 = function(){
        }
(function(){
        })()
let fn2 = new Function()
1.函数执行空间 - 执行栈 | 调用栈
  理解：函数作为复杂数据类型储存在堆区，调用的时候，在调用栈中将其复制运行，运行结束后，自动销毁。
2.函数不被销毁的空间 
    -函数体返回一个复杂数据类型，被外部使用，这时候，函数执行空间不被销毁
  function fn(){
            let num = 100
            return {name:'jack'} //1.复杂数据类型
        }
     let f = fn() //2.外部使用

闭包： 一种语法，函数的高级用法.
闭包形式成条件
           1. 有函数嵌套
           2. 内部函数使用外部函数私有变量
           3. 内部函数被返回在外部使用
闭包作用:
            1. 生成一个不被销毁的执行空间, 
                缺点: 引起内存泄露问题
                特点: 形成块作用域
            2. 外部函数可以访问内部函数的变量
                  作用域: 内部函数可以访问外部函数变量
            3. 保护私有变量
                优点： 可以把一些变量放在函数里面，不会污染全局
                缺点： 要利用闭包函数才能访问，不是很方便
闭包写法:

闭包三种写法：
方法1：
function fn1(){
            var num = 1;
            return function(){
                console.log(num);
            }
        }
        let f1 = fn1()
        f1()
方法2：
let fun;
        function fn(){
            var num=2;
            fun = function(){
                console.log(num);
            }
        }
        fn()
        fun()
方法3：
let f3 = (function(){
            var num=3;
            return function(){
                console.log(num);
            }
})()
f3()

//1.明星点赞
const liBtns = document.querySelectorAll('ul>li>button')
        for (let i = 0; i < liBtns.length; i++) {
            // let num = 0;  //1.let块作用域
            // function fn() { //2.闭包
            //     var num = 0;
            //     liBtns[i].addEventListener('click', function () {
            //         this.innerHTML = '点赞 ' + ++num;
            //     })
            // }
            // fn()
            (function () {  //2.2闭包第二种写法
                var num = 0;
                liBtns[i].addEventListener('click', function () {
                    this.innerHTML = '点赞 ' + ++num;
                })
            })()
        }
//2.【考试题】
function getCounter(){
            let counter = 0;
            return function(){
                return counter+=1
            }
        }
let f1 = getCounter()
        console.log(f1()); //1
        console.log(f1()); //2
        console.log(getCounter()()); //1
        console.log(getCounter()()); //1

    作业:
       1. 预习jquery
       2. 选项卡练习复习 (明天jquery实现)
       3. todolist应用   

    console.log(getCounter()()); //1
    console.log(getCounter()()); //1

作业:
   1. 预习jquery
   2. 选项卡练习复习 (明天jquery实现)
   3. todolist应用