12-1原型

一、原型

只要在类的原型上设置了一个方法，那么所有的对象都拥有这个方法

Array
push
Array.prototypewx.push
写在原型上
sayHello

 <script>
        var arr = new Array(1,2,3);
        Array.prototype.sayHello = function(){
            console.log("hello")
        }
        var a = [4,5,6]
        arr.push(4)
        arr.sayHello()
        a.sayHello()
    </script>

二、原型链

 <script>
        /* 为什么一个实例化的对象能够使用它原型上的方法 */
        function Person(name,age){
            this.name = name;
            this.age = age;
        }
        Person.prototype.sayName = function(){
            console.log(this.name)
        }
        /* 
        1.每个对象都有一个隐藏属性__proto__,她指向它的原型对象
        2.这个对象会享有原型上的属性或者方法 */
        var wang = new Person("wangyuhuan",18)
        console.log(wang)
        wang.sayName = function(){
            console.log("wang")
        }
        wang.sayName()
        console.log(wang.__proto__)
        console.log(wang.__proto__==Person.prototype)
    </script>

2-1原型链终点

<script>
        /* 如果一个对象自身没有一个方法，它就会从它的原型上去找 */
        /* object.prototype 是终点 是源头 */
        function Person(name,age){
            this.name = name;
            this.age = age;
        }
        Person.prototype.sayAge = function(){
            console.log(this.age)
        }
        var yuan = new Person("yuanchuan",18);
        console.log(yuan)
        console.log(yuan.__proto__)
        console.log(yuan.__proto__==Person.prototype)
        console.log(yuan.toString())
    </script>

三、es6-class

es6的写法
使用extends关键字可以实现继承，之后自动拥有父类的属性和方法
子类可以调用父类的方法
父类不能调用子类的方法

 <script>
        /* es6的写法*/
        class Person{
            constructor(name,age){
                this.name = name;
                this.age = age
            }
            sayName(){
                console.log(this.name)
            }
        }
        class Student extends Person{
            constructor(name,age,skill){
                super(name,age);
                this.skill = skill
            }
        }
        var cheng = new Person("chengchao",18)
        // cheng.sayName()
        var s = new Student("lisi",17,"js")
        // s.sayName()
        console.log(s.__proto__)
    </script>

3-1在子类中调用父类的方法

在子类的方法中去调用父类的方法使用this就可以调用

<script>
                class Person{
                    constructor(name,age){
                        this.name = name;
                        this.age = age
                    }
                    sayName(){
                        console.log(this.name)
                    }
                }
                /* 在子类的方法中去调用父类的方法*/
                class Student extends Person{
                    constructor(name,age,skill){
                        super(name,age);
                        this.skill = skill
                    }
                    saySkill(){
                        this.sayName()
                    }
                }
                var cheng = new Student("lisi",12,"js");
                cheng.saySkill()
                var p =new Person("zhangsan",18)
                console.log(Person.prototype)
            </script>

四、类 继承 打包 封装http

封装代码
请求了三个接口

let baseUrl = "https://music.aityp.com/"
class Http{
    request({url,data}){
        return new Promise((resolve,reject)=>{
            $.ajax({
                url:baseUrl+url,
                dataType:"json",
                data,
                type:"get",
                success:res=>{
                    resolve(res)
                },
                error:err=>{
                    reject(err)
                }
            })
        })
    }
}
class HomeModel extends Http{
     getBanner(){
         return this.request({
             url:"banner"
         })
     }
     getCatChina(){
        return  this.request({
             url:"top/playlist",
             data:{
                 cat:"华语"
             }
         })
     }
     getNewSong(){
         return this.request({
             url:"top/album"
         })
     }
}

实例化对象去调用

<script>
        var http = new HomeModel();
        http.getBanner().then(res=>{
            console.log(res)
        })
    </script>