javascript继承的6种方法

1原型式继承

简介：对类式继承的封装，过渡对象相当于子类。

1. function inheritObject(o) {
2. //声明过渡函数对象
3. function F() {}
4. //过渡对象的原型继承父类
5. F.prototype = o;
6. return new F();
7. }
8. //测试
9. var book = {
10. name : "javascript",
11. book : ['js','css']
12. };
13. var newbook = inheritObject(book);
14. newbook.name = "ajax";
15. newbook.book.push("Node");
16. var otherbook = inheritObject(book);
17. otherbook.name = "xml";
18. otherbook.book.push("React");
19. console.log(newbook.name);//ajax
20. console.log(newbook.book);//[ 'js', 'css', 'Node', 'React' ]
21. console.log(otherbook.name);//xml
22. console.log(otherbook.book);//[ 'js', 'css', 'Node', 'React' ]
23. console.log(book.name);//javascript
24. console.log(book.book);//[ 'js', 'css', 'Node', 'React' ]

缺点：

和类式继承一样，父类对象的引用类型值被共用。

2.构造函数式继承

1. function SuperClass(id) {
2. this.book = ['javascript','html','css'];//引用类型共有属性
3. this.id = id;//值类型公有属性
4. }
5. //父类声明原型方法
6. SuperClass.prototype.showBooks = function() {
7. console.log(this.books);
8. }
9. //声明子类
10. function SubClass(id) {
11. //继承父类
12. SuperClass.call(this,id);
13. }
14. //测试
15. var ins1 = new SubClass(1);
16. var ins2 = new SubClass(2);
17. ins1.book.push("Node");
18. console.log(ins1.id);//1
19. console.log(ins1.book);//['javascript', 'html', 'css', 'Node']
20. console.log(ins2.id);//2
21. console.log(ins2.book);//['javascript', 'html', 'css']
22. ins1.showBooks();//TypeError: ins1.showBooks is not a function

3.组合式继承

1. function SuperClass(name) {
2. this.name = name;
3. this.book = ['javascript','html','css'];
4. }
5. SuperClass.prototype.getName = function () {
6. console.log(this.name);
7. };
8. function SubClass(name,time) {
9. //构造函数式继承，继承父类name属性
10. SuperClass.call(this,name);
11. this.time = time;
12. }
13. //类式继承，子类原型继承
14. SubClass.prototype = new SuperClass();
15. //子类原型方法
16. SubClass.prototype.getTime = function () {
17. console.log(this.time);
18. };
19. //测试
20. var ins1 = new SubClass('Node',2016);
21. ins1.book.push("Node");
22. console.log(ins1.book);
23. ins1.getName();
24. ins1.getTime();
25. var ins2 = new SubClass('React',2015);
26. console.log(ins2.book);
27. ins2.getName();
28. ins2.getTime();

4.原型式继承

1. function inheritObject(o) {
2. //声明过渡函数对象
3. function F() {}
4. //过渡对象的原型继承父类
5. F.prototype = o;
6. return new F();
7. }
8. //测试
9. var book = {
10. name : "javascript",
11. book : ['js','css']
12. };
13. var newbook = inheritObject(book);
14. newbook.name = "ajax";
15. newbook.book.push("Node");
16. var otherbook = inheritObject(book);
17. otherbook.name = "xml";
18. otherbook.book.push("React");
19. console.log(newbook.name);//ajax
20. console.log(newbook.book);//[ 'js', 'css', 'Node', 'React' ]
21. console.log(otherbook.name);//xml
22. console.log(otherbook.book);//[ 'js', 'css', 'Node', 'React' ]
23. console.log(book.name);//javascript
24. console.log(book.book);//[ 'js', 'css', 'Node', 'React' ]

5.寄生式继承


1. function inheritObject(o) {
2. //声明过渡函数对象
3. function F() {}
4. //过渡对象的原型继承父类
5. F.prototype = o;
6. return new F();
7. }
8. //声明基对象
9. var book = {
10. name : "javascript",
11. book : ['js','css']
12. };
13. function createBook(obj) {
14. //通过原型继承方式创建新对象
15. var o = new inheritObject(obj);
16. //拓展新对象
17. o.getName = function() {
18. console.log(name);
19. }
20. //返回拓展后的新对象
21. return o;
22. }
23. var newbook = createBook(book);
24. newbook.name = "ajax";
25. newbook.book.push("Node");
26. var otherbook = createBook(book);
27. otherbook.name = "xml";
28. otherbook.book.push("React");
29. console.log(newbook.name);//ajax
30. console.log(newbook.book);//[ 'js', 'css', 'Node', 'React' ]
31. console.log(otherbook.name);//xml
32. console.log(otherbook.book);//[ 'js', 'css', 'Node', 'React' ]
33. console.log(book.name);//javascript
34. console.log(book.book);//[ 'js', 'css', 'Node', 'React' ]

6.寄生组合式继承

1. function inheritObject(o) {
2. //声明过渡函数对象
3. function F() {}
4. //过渡对象的原型继承父类
5. F.prototype = o;
6. return new F();
7. }
8. //寄生式继承 继承原型
9. function inheritPrototype(subClass,superClass) {
10. //复制一份父类的原型副本保存在变量中
11. var p = inheritObject(superClass.prototype);
12. //修正因为重写子类原型导致子类的constructor属性被修改
13. p.constructor = subClass;
14. //设置子类的原型
15. subClass.prototype = p;
16. }
17. function SuperClass(name) {
18. this.name = name;
19. this.colors = ["red","blue","green"];
20. }
21. //定义父类原型方法
22. SuperClass.prototype.getName = function() {
23. console.log(this.name);
24. }
25. function SubClass(name,time) {
26. SuperClass.call(this,name);
27. this.time = time;
28. }
29. //寄生式继承父类原型
30. inheritPrototype(SubClass,SuperClass);
31. //子类新增原型方法
32. SubClass.prototype.getTime = function() {
33. console.log(this.time);
34. }
35. //测试
36. var ins1 = new SubClass("js",2014);
37. var ins2 = new SubClass("css",2015);
38. ins1.colors.push("black");
39. console.log(ins1.colors);
40. console.log(ins2.colors);
41. ins2.getName();
42. ins2.getTime();