JavaScript面向对象之实现继承的5种方法
Posted 巅峰小学生
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript面向对象之实现继承的5种方法相关的知识，希望对你有一定的参考价值。
1 <html> 2 <head></head> 3 <body> 4 <script type="text/javascript"> 5 6 /* 7 以下为文档原话： 8 ECMAScript实现继承的方式不止一种。 9 这是因为 JavaScript 中的继承机制并不是明确规定的，而是通过模仿实现的。这意味着所有的继承细节并非完全由解释程序处理。 10 作为开发者，你有权决定最适用的继承方式。 11 12 13 在JavaScript中实现继承的方法： 14 1. 对象冒充 15 2. call() 16 3. apply() 17 4. 原型链（prototype chaining） 18 5. 混合方式 19 20 */ 21 22 23 /* 实现继承方法1 --- 【对象冒充】 */ 24 25 //父类 26 function Person(name,age) 27 { 28 this.name = name; 29 this.age = age; 30 31 this.show = function() 32 { 33 window.alert(this.name+"..."+this.age); 34 } 35 } 36 37 Person.prototype.sayHi = function(){ 38 alert("hi"); 39 } 40 41 42 //子类 43 function Student(name,age) 44 { 45 this.student = Person; //将Person类的构造函数赋值给this.student 46 this.student(name,age); //js中实际上是通过对象冒充来实现继承的 47 delete this.student; //移除对Person的引用 48 } 49 50 var s = new Student("小明",17); 51 s.show(); 52 //s.sayHi(); //对象冒充不能继承prototype内容 53 54 var p = new Person("小明",17); 55 p.show(); 56 p.sayHi(); 57 58 59 //子类2 60 function MidStudent(name,age) 61 { 62 this.midstudent = Person; 63 this.midstudent(name,age); 64 65 //实现方法重载 66 this.show = function() 67 { 68 window.alert("midstudent show()"); 69 } 70 } 71 72 var m = new MidStudent("张三",11); 73 m.show(); 74 75 76 77 78 79 80 81 /* 实现继承方法2 --- 【call方法】 */ 82 83 /* call()方法是与经典的对象冒充方法最相似的方法 84 【第一个参数】用作 this 的对象。 85 【其他参数】直接传递给函数自身。 86 */ 87 88 function sayColor(sPrefix,sSuffix) { 89 alert(sPrefix + this.color + sSuffix); 90 }; 91 92 var obj = new Object(); 93 obj.color = "blue"; 94 95 96 //理解：将sayColor中原本的this替换成了obj的this 97 //最后生成的消息 "The color is blue, a very nice color indeed." 将被显示出来 98 sayColor.call(obj, "The color is ", "a very nice color indeed."); 99 100 101 102 103 104 /* 实现继承方法3 --- 【apply方法】 */ 105 106 //apply() 方法有两个参数 107 // 第一个参数：【用作 this 的对象】 108 // 第二个参数：【要传递给函数的参数的数组】 109 110 function sayColor(sPrefix,sSuffix) { 111 alert(sPrefix + this.color + sSuffix); 112 }; 113 114 var obj = new Object(); 115 obj.color = "blue"; 116 117 //理解：将sayColor中原本的this替换成了obj的this 118 sayColor.apply(obj, new Array("The color is ", "a very nice color indeed.")); 119 120 121 122 123 124 125 /* 实现继承方法4 --- 【原型链】 */ 126 127 function ClassA() {} 128 129 ClassA.prototype.color = "blue"; 130 ClassA.prototype.sayColor = function () { 131 alert(this.color); 132 }; 133 134 function ClassB() { 135 } 136 137 //继承ClassA的原型内容 138 /*注意： 139 1、原型链和对象冒充不同，原型链除了继承prototype的内容也能继承ClassA函数内的方法（注意：如果方法中含有this的引用，会出现undefined，可以通过对象冒充来解决该问题） 140 2、原型链不能像 call和apply一样将父类对象this改为子类对象this 141 3、如果要使用原型链，那么前提是父类是使用原型定义的 142 */ 143 ClassB.prototype = new ClassA(); 144 145 146 147 148 149 /* 实现继承方法5 --- 【混合方式】 */ 150 151 function ClassA(sColor) { 152 this.color = sColor; 153 } 154 155 //类1：给ClassA类加入sayColor方法 注意：对象冒充无法继承prototype加入的内容 156 ClassA.prototype.sayColor = function () { 157 alert(this.color); 158 }; 159 160 161 162 //类2：使用对象冒充方式继承ClassA 163 function ClassB(sColor, sName) { 164 ClassA.call(this, sColor); 165 this.name = sName; 166 } 167 168 //重点注意：这里是将ClassB的原型继承ClassA 169 ClassB.prototype = new ClassA(); 170 171 //给ClassB类加入sayName方法 172 ClassB.prototype.sayName = function () { 173 alert(this.name); 174 }; 175 176 177 178 179 </script> 180 </body> 181 </html>
以上是关于JavaScript面向对象之实现继承的5种方法的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript面向对象轻松入门之继承(demo by ES5ES6)