js中的new和面向对象

new的过程中发生了什么

function CreateCat(name) {this.name = name}var catA = new CreateCat('xiaoA')console.log(catA.name)/*** new的操作：* 1.创建了一个空对象* 2.将构造函数的prototype属性赋值给新对象的__proto__属性* 3.将构造函数的this指向新对象* 4.执行构造函数的代码* 5.将新对象返回*/// new中处理的处理方法如下所示:var catB = (function () {var obj = {}                                  //1.创建了一个空对象obj.__proto__ = CreateCat.prototype           //2.将构造函数的prototype属性赋值给新对象的__proto__属性CreateCat.call(obj, 'xiaoB')                  //3.将构造函数的this指向新对象  4.执行构造函数的代码return obj                                    //5.将新对象返回})()console.log(catB.name)

类式继承

// 在js中，访问对象属性的时候，如果对象下没有这个属性，则去他下面的__proto__中寻找，如果还没有就一直向下寻找，直到没有__proto__属性为止// 类式继承function A(name) {this.name = namethis.list = [1, 2, 3]}A.prototype.getName = function () {console.log(this.name)}function SubA(name) {this.subName = 'sub' + this.name}SubA.prototype = new A()var sa1 = new SubA('sa1')console.log(sa1.list, sa1.name)   // [1,2,3] undefined/*** // 类式继承中的处理过程* 1.new A 得到一个对象* new A() -> {*   name: undefined*   list: [1,2,3]*   __proto__: {*     getName: fn*     constructor: ...*   }* }** 2.将该对象赋给SubA的prototype* SubA.prototype = {*   name: undefined*   list: [1,2,3]*   __proto__: {*     getName: fn*     constructor: ...*   }* }** 3.new SubA 得到一个对象,此对象的__proto__为SubA.prototype* new SubA() -> {*   subName: 'sub sa1'*   __proto__: {*     name: undefined*     list: [1,2,3]*     __proto__: {*       getName: fn*       constructor: ...*     }*   }* }** 4.将得到的对象给sa1* sa1 = {*   subName: 'sub sa1'*   __proto__: {*     name: undefined*     list: [1,2,3]*     __proto__: {*       getName: fn*       constructor: ...*     }*   }* }** //类式继承的问题：* 1.这种方法不支持父构造函数带参数。* 2.父构造函数里的方法和属性都会变成共有的属性* 例如：*    A.prototype.getName = function () {*      console.log(this.name)*    }*    在任何一个SubA的实例中都可以使用该方法*/

构造函数继承

function A(name) {this.name = namethis.list = [1, 2, 3]}A.prototype.getName = function () {console.log(this.name)}function SubA(name) {A.call(this, name)this.subName = 'sub' + this.name}var sa1 = new SubA('xiaoA')console.log(sa1.name, sa1.subName) // xiaoA subxiaoA// sa1.getName() 报错/*** sa1 = new SubA('xiaoA') -> {*   __proto__:{                    // 由于SubA中没有prototype，因此此处为一个空对象{}*     constructor: ...*   }*   name: 'xiaoA',*   list: [1,2,3],*   subName: 'sub xiaoA'* }*** // 构造函数继承不能继承父构造函数的原型方法*/

组合式继承

function A(name) {this.name = namethis.list = [1, 2, 3]}A.prototype.getName = function () {console.log(this.name)}function SubA(name) {A.call(this, name)this.subName = 'sub' + this.name}SubA.prototype = new A()var sa1 = new SubA('xiaoA')console.log(sa1.name, sa1.subName)  // xiaoA subxiaoAsa1.getName()                       // xiaoA/*** SubA.prototype = new A() -> {*   name: undefined,*   list: [1,2,3],*   __proto__: {*     getName: fn*   }* }** sa1 = new SubA('xiaoA') - {*   name: 'xiaoA',*   list: [1,2,3],*   subName: 'sub xiaoA'*   __proto__: {*     name: undefined,*     list: [1,2,3],*     __proto__: {*       getName: fn*     }*   }* }** 组合式继承的问题（主要是代码洁癖上的问题，尽量不需要多余的代码和重复的不必要的执行）：*  1. __proto__里面的属性没有用，例如此处sa1.__proto__中的name和list*  2. 执行了两次父构造函数:第一次,SubA.prototype = new A(); 第二次 A.call(this, name)*/

寄生组合式继承

function A(name) {this.name = namethis.list = [1, 2, 3]}A.prototype.getName = function () {console.log(this.name)}function SubA(name) {A.call(this, name)this.subName = 'sub' + this.name}// SubA.prototype = new A() 组合式继承的问题在于此处太过于暴力，将实例直接传给SubA.prototype，导致了不必要的属性function inheritPrototype(subClass, superClass) {function F() {}F.prototype = superClass.prototypesubClass.prototype = new F()subClass.prototype.constructor = subClass}inheritPrototype(SubA, A)var sa1 = new SubA('xiaoA')console.log(sa1.name, sa1.subName)  // xiaoA subxiaoAsa1.getName()                       // xiaoA/*** sa1 = new SubA('xiaoA') - {*   name: 'xiaoA',*   list: [1,2,3],*   subName: 'sub xiaoA'*   __proto__: {*     __proto__: {*       getName: fn*     }*   }* }*/

多态

//多态： 表示不同对象调用相同方法会产生不同结果function Base() {}Base.prototype.initial = function () {this.init()}function SubA() {this.init = function () {console.log('subA init')}}function SubB() {this.init = function () {console.log('subB init')}}SubA.prototype = new Base()SubB.prototype = new Base()var subA = new SubA()var subB = new SubB()subA.initial()  //subA initsubB.initial()  //subB init

这个视频讲的很不错

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！