1. 原型繼承
<html>
<head>
<script type="text/javascript">
//#div1.__proto__->HTMLDivElement.prototype->HTMLElement.prototype->Element.prototype.Node.prototype->EventTarget.prototype->Object.property
function myObject() {
}
myObject.prototype = {
constructor:Object,
hasOwnProperty:function () {
}
}
function myEventTarget() {
}
myEventTarget.prototype = new myObject();
myEventTarget.prototype.addEventListener = function () {
console.log("222");
}
function myNode() {
};
myNode.prototype = new myEventTarget();
myNode.prototype.createElement = function () {
console.log("111");
};
var n = new myNode();
function A() {
this.x = 100;
}
A.prototype.getX = function () {
console.log(this.x);
}
function B() {
this.y = 200;
}
B.prototype = new A();
// ->原型繼承使我們JS中最常用的一種繼承方式
// ->子類B想要繼承父類中的所有屬性和方法(私有+共有),只需要讓B.prototype = new A;
// -> 原型繼承的特點(diǎn):他是把父類中私有的+共有的都繼承到了子類原型上(子類共有的)
//->核心:原型繼承并不是把父類中的屬性和方法克隆一份一模一樣的給B,而是讓B和A之間增加了原型鏈的連接,以后B的實(shí)例n想要用A中的getX方法一級級的向上查找來使用
</script>
</head>
<body></body>
</html>
2. call繼承
<html>
<head>
<script type="text/javascript">
// call繼承: 把父類私有的屬性和方法 克隆一份一模一樣的 作為子類私有的屬性
function A() {
this.x = 100;
}
A.prototype.getX = function () {
console.log(this.x);
}
function B() {
// this->n
A.call(this);// A.call(n) 把A執(zhí)行讓A中的this變成了n
}
var n = new B;
console.log(n.x);
</script>
</head>
<body></body>
</html>
3. 冒充對象繼承
<html>
<head>
<script type="text/javascript">
// 冒充對象繼承:把父類私有的+共有的 克隆一份一模一樣的 給子類私有的
function A() {
this.x = 100;
}
A.prototype.getX = function () {
console.log(this.x);
}
function B() {
var temp = new A;
for (var key in temp) {
this[key] = temp[key];
}
temp = null;
}
var n = new B;
n.getX();
</script>
</head>
<body></body>
</html>
4.組合式繼承
<html>
<head>
<script type="text/javascript">
// 混合模式繼承: 原型繼承 + call繼承
function A() {
this.x = 100;
}
A.prototype.getX = function () {
console.log(this.x);
}
function B() {
// this->n
A.call(this);// A.call(n) 把A執(zhí)行讓A中的this變成了n
}
B.prototype = new A; // -> B.prototype:x = 100
B.prototype.constructor = B;
</script>
</head>
<body></body>
</html>
5. 寄生組合式繼承
<html>
<head>
<script type="text/javascript">
function A() {
this.x = 100;
}
A.prototype.getX = function () {
console.log(this.x);
}
function B() {
// this->n
A.call(this);// A.call(n) 把A執(zhí)行讓A中的this變成了n
}
B.prototype = Object.ObjectCreate(A.prototype); // -> B.prototype:x = 100
B.prototype.constructor = B;
var n = new B;
console.dir(n);
function ObjectCreate(o) {
function fn() {
fn.prototype = 0;
return new fn;
}
}
</script>
</head>
<body></body>
</html>
6. 中間類繼承
<script type="text/javascript">
// 不兼容
// function avgFn() {
//// var ary = Array.prototype.slice.call(arguments)
// Array.prototype.sort.call(arguments,function (a,b) {
// return a-b;
// });
// Array.prototype.pop.call(arguments);
// Array.prototype.shift.call(arguments);
// return (eval(Array.prototype.join.call(arguments, "x")) / arguments.length).toFixed(2);
// }
// console.log(avgFn(10,20,30,10,40));
function avgFn() {
arguments.__proto__ = Array.prototype;
arguments.sort(function(a, b) {
return a - b;
});
arguments.pop();
arguments.shift();
return eval(arguments.join("+")) / arguments.length;
}
console.log(avgFn(10, 20, 30, 10, 40));
</script>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
