JavaScript面向对象
一,类与实例
1,类的声明
/** *类的声明 */ function Animal(name) { this.name = name; } /** *ES6中class的声明 */ class Animal2 {//类的声明 constructor(name) {//构造函数 this.name = name; } }
2,生成实例
/** *实例类的对象/实例化(通过new实例化,如果没有参数,可以省略括号,但不建议这么做) */ console.log(new Animal(),new Animal2());
二,类与继承
1,如何实现继承
借用构造函数,使用原型链,组合继承
2,继承的几种方式
(1)借助构造函数实现继承
/** * 借助构造函数实现继承 */ function Parent1() { this.name = 'parent1'; } Parent1.prototype.say = function() { //构造函数继承无法继承原型对象上的属性 !!! }; function Child1() { Parent1.call(this); this.type = 'child1'; } console.log(new Child1()); console.log(new Child1().say()) //(intermediate value).say is not a function !!!
(2)借助原型链实现继承
/** * 借助原型链实现继承 */ function Parent2() { this.name = 'parent2'; this.play = [1, 2, 3]; } function Child2() { this.type = 'child2'; } Child2.prototype = new Parent2(); var s1 = new Child2(); var s2 = new Child2(); console.log(s1.play, s2.play); //[1, 2, 3] [1, 2, 3] s1.play.push(4); console.log(s1.play); //[1, 2, 3, 4] !!! console.log(s2.play); //[1, 2, 3, 4] !!! console.log(s1.constructor,s2.constructor); //Parent2 Parent2 !!!
(3)组合方式
/** * 组合方式 */ function Parent3() { this.name = 'parent3'; this.play = [1, 2, 3]; } function Child3() { Parent3.call(this); this.type = 'child3'; } Child3.prototype = new Parent3(); var s3 = new Child3(); //实例化的时候,父类构造函数执行的两次 !!! var s4 = new Child3(); s3.play.push(4); console.log(s3.play); //[1, 2, 3, 4] console.log(s2.play); //[1, 2, 3] console.log(s3.constructor); //Parent3 !!!
(4)组合方式优化1
/** * 组合继承的优化1 */ function Parent4() { this.name = 'parent4'; this.play = [1, 2, 3]; } function Child4() { Parent4.call(this); this.type = 'child4'; } Child4.prototype = Parent4.prototype; var s5 = new Child4(); var s6 = new Child4(); console.log(s5, s6); s5.play.push(4); console.log(s5.play); //[1, 2, 3, 4] console.log(s6.play); //[1, 2, 3] console.log(s5 instanceof Child4, s5 instanceof Parent4); //true true console.log(s5.constructor); //Parent4 !!!
(5)组合方式优化2
/** * 组合继承的优化2 */ function Parent5() { this.name = 'parent5'; this.play = [1, 2, 3]; } function Child5() { Parent5.call(this); this.type = 'child5'; } Child5.prototype = Object.create(Parent5.prototype); Child5.prototype.constructor = Child5; var s7 = new Child5(); var p5 = new Parent5(); console.log(s7.constructor); //Child5
附:Object.create的实现方式
Object.create = function (o) { var F = function () {}; F.prototype = o; return new F(); };
未完待续...