学习ES6[尚硅谷二]笔记

24.class类

<!--
//(1)通过class 关键字创建类，类名我们还是习惯性定义首字母大写
//(2)类里面有个constructor函数,可以接受传递过来的参数，同时返回实例对象
//(3)constructor函数只要new生成实例时，就会自动调用这个函数，如果我们不写这个函数，类也会自动生成这个函数
//(4)生成实例new不能省略
//(5)最后注意语法规范，创建类 类名后面不要加小括号，生成实例 类名后面加小括号，构造函数不需要加function

-->

<script>
    class Star{
        constructor(uname,age){
            this.uname=uname
            this.age=age
        }
        sing(song){
            console.log(this.uname+song);
        }
    }
    //2.利用类创建对象 new
   var ldh= new Star("刘德华",18)
    console.log(ldh)
    var zxy=new Star('张学友',20)
    console.log(zxy)
    //(1)我们类里面所有的函数不需要写function
    //(2)多个函数方法之间不需要添加逗号分隔
    ldh.sing("冰雨");
    zxy.sing("李香兰");
</script>

25.class中的extend

<!--
super关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数，也可以调用父类的普通函数
-->
<script>
    /*
    class Father {
        constuctor (){

        }
        money(){
            console.log(100)
        }
    }
    class  Son extends Father{}
    var son=new Son()
    son.money()
    */
    class Father{
        constructor(x,y){
            this.x=x;
            this.y=y;
        }
        sum(){
            console.log(this.x+this.y)
        }
    }
    class Son extends Father{
        constructor(x,y){
            super(x,y)//调用了父类中的构造函数
        }
    }
    var son=new Son(1,2)
    son.sum();

</script>

26.super关键字

<script>
    class Father{
        say(){
            return '我是爸爸'
        }
    }
    class Son extends Father{
        say(){
            console.log(super.say()+'的儿子')
            //super.say()就是调用父类中的普通函数 say()
        }
    }
    var son=new Son();
    son.say();

</script>

 27.super应用

<script>
    class Father{
        constructor(x,y){
            this.x=x;
            this.y=y;
        }
        add(x,y){
            return this.x+this.y
        }
    }
    class Son extends Father {
        constructor(x,y){
            super(x,y);
            this.x=x;
            this.y=y;
        }
        substruct(x,y){
            return this.x-this.y
        }
    }
    var son=new Son(5,2)
    console.log(son.substruct())
    console.log(son.add())
</script>

28.class属性

<!--
1.在ES6中类没有变量提升，所以必须先定义类，才能通过类实例化对象
2.类里面的公有的属性和方法一定要加this使用。
-->
<script>
   var _that
   var that
    class Star{
        constructor(uname,age){
            that=this ;
            console.log(this)
            this.uname=uname;
            this.age=age;
            //this.sing()
            this.btn=document.querySelector("button");
            this.btn.onclick=this.sing;
        }
        sing(){
            //这个sing方法里面的this指向的是btn这个按钮，因为这个按钮调用了这个函数
            console.log(this)
            console.log(that.uname)
        }
        dance(){
            //这个dance里面的this指向的是实例化对象ldh因为ldh调用了这个函数
           _that=this
            console.log(this)
        }
    }
    var ldh=new Star("刘德华")
   ldh.dance()

</script>

30.静态成员和实例成员

<script>
    //构造函数中的属性和方法我们称为成员，成员可以添加
    function Star(uname,age){
        this.uname=uname;
        this.age=age;
        this.sing=function(){
            console.log("我会唱歌");
        }
    }
    var ldh=new Star("刘德华",18)
    //实例成员就是构造函数内部通过this添加的成员 uname age sing 就是实例成员
    //实例成员只能通过实例化的对象来访问
    console.log(ldh.uname)
    ldh.sing();
    //2.静态成员 在构造函数本身上添加的成员 sex 就是静态成员
    Star.sex="男"
    //静态成员只能通过构造函数来访问
    console.log(Star.sex)
    console.log(ldh.sex)//不能通过对象来访问
</script>

 31.构造函数问题

<script>
    //构造函数中的属性和方法我们称为成员，成员可以添加
    function Star(uname,age){
        this.uname=uname;
        this.age=age;
        this.sing=function(){
            console.log("我会唱歌");
        }
    }
    var ldh=new Star("刘德华",18)
    //实例成员就是构造函数内部通过this添加的成员 uname age sing 就是实例成员
    //实例成员只能通过实例化的对象来访问
    console.log(ldh.uname)
    ldh.sing();
    //2.静态成员 在构造函数本身上添加的成员 sex 就是静态成员
    Star.sex="男"
    //静态成员只能通过构造函数来访问
    console.log(Star.sex)
    console.log(ldh.sex)//不能通过对象来访问
</script>

 32.构造函数原型

<script>
    function Star(uname,age){
        this.uname=uname;
        this.age=age;
    }
    //很多情况下，我们需要手动的利用constructor这个属性指回 原来的构造函数
    // Star.prototype.sing=function(){
    //     console.log("我会唱歌")
    // }
    // Star.prototype.movie=function(){
    //     console.log("我会演电影")
    // }
    Star.prototype={
        //如果我们修改了原来的原型对象，给原型对象赋值的是一个对象，则必须手动的利用constructor
        //指回原来的构造函数
        constructor:Star,
        sing:function(){
             console.log("我会唱歌")
        },
        movie:function(){
            console.log("我会演电影")
        }
    }

    var ldh=new Star("刘德华",26)
    console.log(Star.prototype.constructor)
    console.log(ldh.__proto__.constructor)
    ldh.sing()
    ldh.movie()
</script>
</body>
</html>

 33.原型链

<script>
    function Star(uname,age){
        this.uname=uname;
        this.age=age;
    }
    Star.prototype.sing=function(){
        console.log("我会唱歌")
    }
    var ldh=new Star("刘德华",18)
    //1.只要是对象就有__prpto__原型，指向原型对象
    console.log(Star.prototype);
    console.log(Star.prototype.__proto__===Object.prototype);
    //2.我们Star原型对象里面的__proto__原型是指向的是 Object.prototype
    console.log(Object.prototype.__proto__)
</script>

34.js查找机制

<!--
JavaScript的成员查找机制
1.但访问一个对象的属性(包括方法)时，首先查找这个对象自身有没有该属性，
2.如果没有就查找他的原型(也就是__proto__指向的prototype原型对象)
3.如果还没有就查找原型对象的原型(Object的原型对象)
4.依次类推一直找到Object为止(null)
-->

<script>
    function Star(uname,age){
        this.uname=uname;
        this.age=age;
    }
    Star.prototype.sing=function(){
        console.log("我会唱歌")
    }
    Star.prototype.sex="男"
    //Object.prototype.sex="男"
    var ldh=new Star("刘德华",18)
    ldh.sex="男"
    console.log(ldh.sex)
    console.log(Object.prototype);
    console.log(ldh);
    console.log(Star.prototype)
    console.log(ldh.toString())
</script>

 35.原型对象中this指向

<script>
    function Star(uname,age){
        this.uname=uname;
        this.age=age;
    }
    var that;
    Star.prototype.sing=function(){
        console.log("我会唱歌")
        that=this;
    }

    var ldh=new Star('刘德华',18)
    //1.在构造函数中，里面this指向的是对象实例 ldh
    ldh.sing();
    console.log(that===ldh)
//2.原型对象函数里面的this 指向的是 实例对象 ldh
</script>

 36.扩展内置对象方法

<!--
扩展内置对象
可以通过原型对象。对原来的内置对象进行扩展自定义的方法。比如给数组增加自定义求偶数和的功能
注意:数组和字符串内置对象不能给原型对象覆盖操作Array.prototype={},只能是Array.rptotype.xxx=function(){}的方式
-->

<script>
    //原型对象的应用 扩展内置对象方法

    Array.prototype.sum=function(){
        var sum=0;
        for(var i=0;i<this.length;i++){
            sum+=this[i]
        }
        return sum ;
    }
    //  Array.prototype={
    //      sum:function(){
    //          var sum = 0;
    //          for (var i = 0; i < this.length; i++) {
    //              sum += this[i]
    //          }
    //          return sum;
    //      }
    //  }
    var arr=[1,2,3];
    console.log(arr.sum());
    console.log(Array.prototype);
    var arr1=new Array(11,22,33);
    console.log(arr1.sum());
</script>

 37.call方法 

<script>
    //call方法
    function fn(x,y){
        console.log("我想喝手磨咖啡");
        console.log(this)
        console.log(x+y)
    }
    var o={
        name:'andy'
    }
   // fn()
    //1.call()可以调用函数
   // fn.call()
    //2.call()可以改变这个函数的this指向 此时这个函数的this 就指向了o这个对象
    fn.call(o,1,2)
</script>

 38.借用父构造函数继承特性

<script>
    //借用父构造函数继承属性
    //1.父构造函数
    function Father(uname,age){
        this.uname=uname;
        this.age=age;
    }
    Father.prototype.money=function(){
        console.log(100000)
    };
    //2.自构造函数
    function Son(uname,age,score){
        //this指向子构造函数的对象实例
       Father.call(this,uname,age);
       this.score=score;
        //this.super(Father)
    }
   // Son.prototype=Father.prototype; 这样直接赋值会有问题，如果修改了子原型对象，父原型对象也会跟着一起变化
    Son.prtotype=new Father();
   //如果利用对象的形式修改了原型对象，别忘了利用constructor指回原来的原型对象
   Son.prototype.constructor=Son;
    //这是自构造函数专门的方法
    Son.prototype.exam=function(){
        console.log('孩子要考试');
    }
    var son=new Son('刘德华',18,100);
    console.log(son);
    console.log(Father.prototype);
    console.log(Son.prototype.constructor);
</script>

 39.forEach方法

script>
    //forEach迭代(遍历)数组
    var arr=[1,2,3];
    sum=0;
    arr.forEach(function(value,index,array){
        console.log('每个数组元素'+value);
        console.log('每个数组元素的索引号'+index);
        console.log('数组本身'+array);
        sum+=value;
    })
    console.log(sum)
</script>

 40.filter数组

<!--
3.2数组方法
迭代（遍历）方法：forEach0、map0、filter0、some0、every0;
array.filter(function(currentValue, index, arr))
·filterO方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，主要用于筛选数组
·注意它直接返回一个新数组
● currentValue:数组当前项的值
● index：数组当前项的索引
●arr：数组对象本身
-->
<script>
//filter 筛选数组
var arr=[12,66,4,88,3,5,7];
var newArr=arr.filter(function(value,index){
    //return value>=20;
    return value%2===0;
});
console.log(newArr)
</script>

 41.some函数

<script>
    //some查找数组中是否满足条件的元素
    var arr=[10,30,4];
    var flag=arr.some(function(value){
        //return value>=20;
        return value<3;
    })
    console.log(flag);
    var arr1=['red','pink','green'];
    var flag1=arr1.some(function(value){
        return value==="pink"
    })
    console.log(flag1)
    //1.filter 也是查找满足条件的元素 返回的是一个数组 而且是把所有满足条件的元素返回回来
    //2.some 也是查找满足条件的元素是否存在 返回的是一个布尔值 如果查找到第一个满足条件的元素
    //就终止循环
</script>