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;
// -> 原型继承的特点:他是把父类中私有的+共有的都继承到了子类原型上(子类共有的)
//->核心:原型继承并不是把父类中的属性和方法克隆一份一模一样的给B,而是让B和A之间增加了原型链的连接,以后B的实例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执行让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执行让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执行让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>
网友评论