标签 prototype 下的文章

JS下的面向对象


借助构造函数

// 父类
function Parent () {
  this.name = 'parent'
}

// 子类
function Child () {
  Parent.call(this)
  this.age = '20'
}

var obj = new Child()
console.log(obj.name, obj.age) // parent, 20

借助原型链

// 父类
function Parent () {
  this.name = 'parent'
}

// 父类原型上的方法
Parent.prototype.say = function () {
  console.log('say hello')
}

// 子类
function Child () {
  this.age = '20'
}

// 修改 Child 的原型
Child.prototype = new Parent()

var obj = new Child()
console.log(obj.name, obj.age) // parent, 20
console.log(obj.say) // 打印出 say 函数

组合形式 1

// 父类
function Parent () {
  this.name = 'parent'
}

// 父类原型上的方法
Parent.prototype.say = function () {
  console.log('say hello')
}

// 子类
function Child () {
  Parent.call(this)
  this.age = '20'
}

// 修改 Child 的原型
Child.prototype = Parent.prototype

var obj = new Child()
console.log(obj.name, obj.age) // parent, 20
console.log(obj.say) // 打印出 say 函数
console.log(obj.constructor) // Parent,我们希望的是 Child

组合形式 2

// 父类
function Parent () {
  this.name = 'parent'
}

// 父类原型上的方法
Parent.prototype.say = function () {
  console.log('say hello')
}

// 子类
function Child () {
  Parent.call(this)
  this.age = '20'
}

// 修改 Child 的原型
Child.prototype = Object.create(Parent.prototype)
// 修正 constructor 指向
Child.prototype.constructor = Child

var obj = new Child()
console.log(obj.name, obj.age) // parent, 20
console.log(obj.say) // 打印出 say 函数
console.log(obj.constructor) // Child


JavaScript类的继承


        //  superclass 父类
        function Person(first, last) {
            this.first = first
            this.last = last
        }

        Person.prototype = {
            fullName: function() {
                console.log(this.first + ',' + this.last)
            },
            fullNameReversed: function() {
                console.log(this.first + this.last)
            },
            sayHello: function(str) {
                alert(str)
            },
        }

        //  subclass  子类
        function cuteGirl(args) {
            Person.apply(this, args)
            //    把父类Person的this绑定到当前子类cuteGirl下
        }

        //  subclass extends superclass  子类继承父类
        cuteGirl.prototype = Object.create(Person.prototype)
        //  新建了一个对象,参数Person.prototype是新创建的对象的原型
        cuteGirl.prototype.constructor = cuteGirl
        //  修正cuteGirl的构成器,因为上面改动了cuteGirl.prototype

        var xiaohong = new cuteGirl(['xiao', 'hong'])

        xiaohong.sayHello('hhh')  //    一个弹窗
        xiaohong.fullName()  //    xiao,hong
        xiaohong.fullNameReversed()  //    xiaohong