javascript 中的继承实现, call,apply,prototype,构造函数

javascript中继承可以通过call、apply、protoperty实现
1.call
call的含义:
foo.call(thisObject, args...)
表示函数foo调用的时候,上下文切换为thisObject,意思是用thisObject来调用foo方法,如果没有指定thisObject,则外部的Global对象被用作默认的thisObject
function foo() {
if (!this.s_name) { // 避免被this的属性重新赋值
this.s_name = "inside foo";
}
console.info(this.s_name);
} function bar() {
if (!this.s_name) {
this.s_name = "inside bar";
}
} var p = new bar();
foo.call(p);// foo函数调用,由于使用了call,其上下文切换成p,foo函数中的this指向p output:inside bar
 
用call来实现继承:
/**
* Created by Administrator on 2016/12/4 0004.
*/ function Person() {
this.s_name = "Person"
this.s_age = undefined;
this.s_gender = undefined;
this.f_say = function (txt) {
console.info("%s say:%s", this.s_name, txt)
}
}
// Person test
var p = new Person();
p.f_say('hello'); // Person对象的正常调用 // Man 继承了Person中所有的属性和方法
function Man() {
Person.call(this, this.arguments);// 这里理解下,Person()函数调用过程中,this执行Man,this.f_say=function(){}其实就是给Man执行的,可以认为给Man添加了几个属性和方法
this.s_name = "Man"; // 注意,如果这句话放在第一行,将被Person的构造函数中的this.s_name = "Person"重新赋值
this.f_playGame = function () {
console.info("Man like play game");
}
}
// Man test
var p_man = new Man();
p_man.f_say("hello"); // Man继承了Person中的f_say成员方法
 
2.apply,除了参数不同,和call完全一样,这里还是介绍下
apply的含义:
foo.apply(bar, tuple_arg)
表示调用foo函数的时候,内部涉及到this的都指向bar,这个例子要比前面的call的例子好
// apply
function foo(arg1, arg2) {
this.s_name = "foo";
this.f_func = function (arg1, arg2) {
console.info(this.s_name + " " + arg1 + " " + arg2);// 这里的arg会按照作用域链和原型链综合查找
}
} function bar() {
this.s_name = "bar";
} var f = new foo("foo_arg1", "foo_arg2");
var b = new bar();
f.f_func.apply(b, ["apply_arg1", "apply_arg2"]); //调用foo类型的对象f中的f_func 方法,但是里面的this.s_name 其实是bar类型的对象b的
output:
bar apply_arg1 apply_arg2
继承的例子就不写, 和call一样,在Man()方法中调用Person.apply(this, []), 从而将Person() 中的this.* = * 执行了一遍,this其实是Man()
 
 
3. js原型(prototype)实现继承,具体的原理稍微有点复杂,可以查询其他资料
 
function Person() {
this.s_name = "Person";
this.f_say = function () {
console.info(this.s_name)
}
} function Man() {
this.s_name = "Man";
} Man.prototype = new Person() var p = new Man();
p.f_say(); output:
Man
4.构造函数
该方法和call 以及apply其实一个意思,只不过通过不同的途径来保证父函数执行时,里面的this是自己
 
function Person() {
this.s_name = "Person";
this.f_say = function () {
console.info(this.s_name);
}
} function Man() {
this.parent_method = Person;
this.parent_method(this.arguments); // 执行时Person函数,里面的this其实是Man this.s_name = "Man"; // 如果放在第一行,会被Person() 的执行覆盖
} var p = new Man();
p.f_say(); output:
Man
 
 
上一篇:React + Node 单页应用「二」OAuth 2.0 授权认证 & GitHub 授权实践


下一篇:数值分析:Hermite多项式