Js高级总结3 JavaScript面向对象高级

        ****构造函数模式****
        1 Object 构造函数模式
        先创建 空Object对象再动态添加属性/方法
        起始不确定对象内部数据
        var obj = new Object()

        2 对象字面量模式
        使用 ｛｝创建 指定属性或方法
        var obj1 = { }

        3 工厂模式
        通过工厂函数动态创建对象并返回
        需要创建多个对象 没有具体类型区分
      

 function createPerson(name,age) {
            let obj = {
                name:name,
                age:age,
                setName:function (name) {
                    this.name = name
                }
            }
            //返回一个对象的函数工厂函数
            return obj
        }

        let p = createPerson('Tomcat',12)
        console.log(p.name,p.age)

       4 自定义构造函数模式
        存在类型区分
        缺点 多个对象可能出现重复属性或方法
        解决 将重复属性或方法放在原型下面__proto__ （构造函数+原型）
      

 function Person(name,age) {
            this.name = name
            this.age = age
            this.setName = function (name) {
                this.name= name
            }
        }

        var p1 = new Person('Tomcat',8)
        p1.setName('Lihua')
        console.log(p1.name,p1.age)

        ###########################
       

 function Person(name,age) {
            this.name = name
            this.age = age
            // this.setName = function (name) {
            //     this.name= name
            // }

        }
        Person.prototype.setName = function (name) {
            this.name= name
        }

        var p1 = new Person('Tomcat',8)
        p1.setName('Lihua')
        console.log(p1.name,p1.age)

       ****继承模式原型链****
        1 定义父类构造函数
        2 给父类型添加方法
        3 定义子类型的构造函数
        4 创建父类型的对象赋值给子类型的原型
        5 将子类型原型的构造属性设置为子类型
        6 给子类型原型添加方法
        7 创建子类型的对象 可以调用父类型的方法
        关键 子类型的原型为父类型的一个实例对象
           //父类型
       

function Supper() {
            this.subProp = 'Supper property'
        }
        Supper.prototype.showSuperProp = function () {
            console.log(this.subProp)
        }
        //子类型
        function Sub() {
            this.subProp = 'sub property'
        }

        //子类型的原型为父类型的一个实例对象
      

 Sub.prototype = new Supper()
        Sub.prototype.showSubProp = function () {
            console.log(this.subProp)
        }

        var sub =  new Sub()
        sub.showSubProp()
        sub.showSuperProp()
        sub.toString()

        console.log(sub.constructor)
        console.log(sub)
        //sub 指向父类型
        //让子类型的原型的constructor指向子类型
        Sub.prototype.constructor = Sub
        console.log(sub.constructor)
        console.log(sub)

        ****借用构造函数继承****
        1 定义父类型构造函数
        2 定义子类型构造函数
        3 在子类型构造函数中调用父类型构造
        关键 在子类型构造函数中通用super()调用父类型构造函数 
        

function Person(name,age) {
            this.name = name
            this.age = age
        }

        function  Student(name,age,price) {
            Person.call(this,name,age)//相当于 this.Person(name,age) 伪继承
            this.price = price
        }

        var s = new Student('Tom',20,180)
        console.log(s.name ,s.age , s.price)

        ****组合继承****
        原型链+借用构造函数的组合继承
        1 利用原型链实现对父类对象的方法继承
        2 利用super()解用父类构造函数初始化相同属性
 

     

  function Person(name,age) {
            this.name = name
            this.age = age
        }
        Person.prototype.setName = function (name) {
            this.name = name
        }
        function  Student(name,age,price) {
            Person.call(this,name,age)//相当于 this.Person(name,age) 伪继承
            this.price = price
        }
        Student.prototype = new Person()//为了能看到父类型的方法
        Student.prototype.constructor = Student//修正constructor属性
        Student.prototype.setPrice = function (price) {
            this.price = price
        }
        var s = new Student('Tom',20,180)
        s.setName('Jerry')
        s.setPrice(200)
        console.log(s.name ,s.age , s.price)

// for (var i = 0;i<5;i++){
        //     setTimeout(()=>{
        //         console.log(i)
        //     },5)
        // }
        //    打印5个5

        //     for (var i = 0;i<5;i++){
        //         setInterval(()=>{
        //             console.log(i)
        //         },5)
        //     }每5s打印5个5

        //     for (let i = 0;i<5;i++){
        //         setTimeout(()=>{
        //             console.log(i)
        //         },5)
        //     }
        //    打印0,1,2,3,4