newObject = create(oldObject);
function F(){}; F.prototype = oldObject; var newObject = new F();
class Empolyee{ String name; public Employee(String name){ this.name = name; } public getName(){ return this.name; } } class Coder extends Employee { String language; public Coder(name,language){ super(name); this.language = language; } public getLanguage(){ return this.language; } }
function Empolyee(name){ this.name = name; }
function Empolyee(name){ this.name = name; } var employee = {}; Employee.call(employee,‘Jack‘);
function Empolyee(name){ this.name = name; this.getName = function(){return this.name}; }
function Coder extends Employee(name,language){ super(name); this.language = language; }
var topObject = { __version__ : 1.0; }; function Empolyee(name){ this.name = name; this.getName = function(){return this.name}; } var employee = {}; employee.__proto__ = topObject; Employee.call(employee,‘Jack‘); function Coder(name,language){ this.name = name; this.language = this.language; this.getLanguage = function(){return this.language}; } var coder = {}; coder.__proto__ = employee; Coder.call(coder,‘Coder Jack‘,‘Java‘);
function sliceArguments(argumentsObj,n){ var args = []; for(var i=0;i<argumentsObj.length;i++){ if(i>=n){ args.push(argumentsObj[i]); } } } function newInstance(prototype,constructor){ var obj = {}; obj.__proto__ = prototype; constructor.apply(obj,sliceArguments(arguments,2)); } var employee = newInstance(topObject,Employee,‘Jack‘); var coder = newInstance(employee,Coder,‘Coder Jack‘,‘Java‘);
function newInstance(constructor){ var obj = {}; obj.__proto__ = constructor.prototype; constructor.apply(obj,sliceArguments(arguments,1)); return obj; } function Employee(name){ this.name = name; this.getName = function(){return this.name}; } var employee = newInstance(Empolyee,‘Jack‘); var employee2 = newInstance(Empolyee,‘Jack2‘); var employee3 = newInstance(Empolyee,‘Jack3‘); function Coder(name,language){ this.name = name; this.language = language; this.getLanguage = function(){return this.language}; } Coder.prototype = newInstance(Empolyee,‘‘); var coder = newInstance(Coder,‘Coder Jack‘,‘Java‘); var coder2 = newInstance(Coder,‘Coder Lee‘,‘C#‘); var coder3 = newInstance(Coder,‘Coder Liu‘,‘C++‘); var coder4 = newInstance(Coder,‘Coder Liu‘,‘JavaScript‘);
function Employee(name){ this.name = name; this.getName = function(){return this.name}; } var employee = new Employee(‘Jack‘);
function newInstance(constructor){ var obj = {}; obj.__proto__ = constructor.prototype; constructor.call(obj,sliceArguments(arguments,1)); return obj; }
{
__proto__:Object.prototype,
constructor: 指向函数本身
}
4) 可以修改或替换构造函数都会默认关联的原型对象。需要注意的的是,不少资料说,如果是使用自定义的对象替换了构造函数f默认关联的原型对象,最好添加一行代码
f.prototype.constructor=f
function Employee(){}; function Coder(){}; Coder.prototype = new Employee(); Coder.prototype.constructor = Coder; var coder = new Coder();
但是经过我的测试,即使不写上一行Coder.prototype.constructor = Coder;,以下测试都表现正确
coder instanceOf Coder//true Coder.prototype.isPrototypeOf(coder)//true
<script>
function Employee(name){
this.name = name;
//this.getName = function(){return this.name};方法代码应该放到原型对象之中,而不是初始化函数中,这样每个employee对象都共享同一个方法代码
}
Employee.prototype.getName = function(){return this.name};
var employee = new Employee(‘Jack‘);
console.log("employee.getName(): " + employee.getName());//Jack
var employee2 = new Employee(‘Jack2‘);
console.log("employee2.getName(): " + employee2.getName());//Jack2
function Coder(name,language){
this.name = name;
this.language = language;
//this.getLanguage = function(){return this.language}; 方法代码应该放到原型对象之中,而不是初始化函数中,这样才能实现代码共享
}
Coder.prototype = new Employee(‘‘);
Coder.prototype.constructor = Coder;//这一句话其实也可以不写,不影响继承
Coder.prototype.getLanguage = function(){return this.language};
var coder = new Coder(‘Coder Jack‘,‘Java‘);
console.log("coder.getName(): " + coder.getName());//Coder Jack
console.log("coder.getLanguage(): "+coder.getLanguage());//Java
var coder2 = new Coder(‘Coder Lee‘,‘C#‘);
console.log("coder2.getName(): " + coder2.getName());//Coder Lee
console.log("coder2.getLanguage(): " + coder2.getLanguage());//C#
var coder3 = new Coder(‘Coder Liu‘,‘C++‘);
console.log("coder3.getLanguage(): " + coder3.getName());//Coder Liu
console.log("coder3.getLanguage()" + coder3.getLanguage());//C++
console.log("employee.constructor: " + employee.constructor);
console.log("employee.constructor.prototype === Employee.prototype: " + (employee.constructor.prototype === Employee.prototype));
console.log("employee.constructor.prototype.constructor === Employee: " + (employee.constructor.prototype.constructor === Employee));
console.log("employee instanceof Object: " + (employee instanceof Object));
console.log("employee instanceof Function: " + (employee instanceof Function));
console.log("employee instanceof Employee: " + (employee instanceof Employee ));
console.log("Employee.prototype.isPrototypeOf(employee): " + (Employee.prototype.isPrototypeOf(employee)));
console.log("Function.prototype.isPrototypeOf(employee): " + (Function.prototype.isPrototypeOf(employee)));
console.log("Object.prototype.isPrototypeOf(employee): " + (Object.prototype.isPrototypeOf(employee)));
console.log("coder.constructor: " + coder.constructor);
console.log("coder instanceof Object: " + (coder instanceof Object));
console.log("coder instanceof Function: " + (coder instanceof Function));
console.log("coder instanceof Employee: " + (coder instanceof Employee ));
console.log("coder instanceof Coder: " + (coder instanceof Coder ));
console.log("Employee.prototype.isPrototypeOf(coder): " + (Employee.prototype.isPrototypeOf(coder)));
console.log("Coder.prototype.isPrototypeOf(coder): " + (Coder.prototype.isPrototypeOf(coder)));
console.log("Function.prototype.isPrototypeOf(coder): " + (Function.prototype.isPrototypeOf(coder)));
console.log("Object.prototype.isPrototypeOf(coder): " + (Object.prototype.isPrototypeOf(coder)));
</script>
if (typeof Object.create !== ‘function‘) { Object.create = function (o) { function F() {} F.prototype = o; return new F(); }; } var newObject = Object.create(oldObject);
<!DOCTYPE HTML> <HTML> <HEAD> <TITLE>使用构造器模式(new + prototype)实现继承</TITLE> </HEAD> <BODY> <script> /** * 以原型对象为模板创建出新对象 * 这个函数已经被Chrome和IE9采用,所以需要有个判断这个函数是否已经存在,Crockford的影响力可见一斑 */ if (!Object.create) { Object.create = function(oldObject) { function F() { } ; F.prototype = oldObject; return new F(); } } /** * 在构造函数的原型对象上添加方法 * 非常推荐这个函数,因为这个函数能够培养出在原型对象中定义方法的良好习惯 */ Function.prototype.method = function(name, func) { if (!this.prototype[name]) { this.prototype[name] = func; return this; } }; /** * 使构造函数“继承”其他构造函数 * 实际上是将构造函数的原型对象替换为另外构造函数产生的对象 * */ Function.method(‘inherits‘, function(F) { this.prototype = new F(); return this; }); /***************************************** *使用链式代码清晰紧凑地定义构造函数 *****************************************/ var Employee = function(name) { this.name = name; }.method(‘getName‘, function() { return this.name; }); //由于method和inherits函数都返回this,所以可以非常舒服地将构造函数写成链式代码 var employee = new Employee("jack"); alert(employee.getName()); //由于method和inherits函数都返回this,所以可以非常舒服地将构造函数写成链式代码 var Coder = function(name, language) { this.name = name; this.language = language; }.inherits(Employee).method(‘getLanguage‘, function() { return this.language; }).method(‘getIntroduction‘, function() { return this.name + " is skilled in " + this.language; }); var coder = new Coder(‘Jack‘, ‘Java‘); alert(coder.getIntroduction()); alert(coder.getName()); </script> </BODY> </HTML>
/***************************************** * 模拟私有变量 *****************************************/ var Employee = function(name) { //私有变量 var name = name; this.getName = function() { return name }; }; var employee = new Employee(‘Jack‘); alert(employee.name);//undefined alert(employee.getName());//Jack
/****************** *模拟super.method() ******************/ var Coder = function(name, language) { var _super = new Employee(‘‘); this.name = name; this.language = language; this.getName = function() { return "my name is :" + _super.getName.call(this, name); }; }.inherits(Employee).method(‘getLanguage‘, function() { return this.language; }).method(‘getIntroduction‘, function() { return this.name + " is skilled in " + this.language; }); var coder = new Coder(‘Jack‘, ‘Java‘); alert(coder.getIntroduction()); alert(coder.getName());//my name is Jack
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>使用Object.create实现继承</TITLE>
</HEAD>
<BODY>
<script>
/**
* 以原型对象为模板创建出新对象
*/
if (!Object.create) {
Object.create = function(oldObject) {
function F() {
}
;
F.prototype = oldObject;
return new F();
}
}
/*****************************************
* 使用原型对象创建对象,创建之后再对象初始化,
* 这种创建方式直白地显示了原型语言创建对象的特点
*****************************************/
var employee = {
name : ‘Jack‘,
getName : function() {
return this.name;
}
};
var coder = Object.create(employee);
coder.name = ‘Jackson‘;
coder.language = ‘Java‘;
coder.getIntroduction = function() {
return this.name + " is skilled in " + this.language;
}
alert(coder.getName());
alert(coder.getIntroduction());
</script>
</BODY>
</HTML>
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>使用function实现继承</TITLE>
</HEAD>
<BODY>
<script>
/**
* 以原型对象为模板创建出新对象
* 这个函数已经被Chrome和IE9采用,所以需要有个判断这个函数是否已经存在,Crockford的影响力可见一斑
*/
if (!Object.create) {
Object.create = function(oldObject) {
function F() {
}
;
F.prototype = oldObject;
return new F();
}
}
/**
* 在构造函数的原型对象上添加方法
* 非常推荐这个函数,因为这个函数能够培养出在原型对象中定义方法的良好习惯
*/
Function.prototype.method = function(name, func) {
if (!this.prototype[name]) {
this.prototype[name] = func;
return this;
}
};
/**
* 使构造函数“继承”其他构造函数
* 实际上是将构造函数的原型对象替换为另外构造函数产生的对象
*
*/
Function.method(‘inherits‘, function(F) {
this.prototype = new F();
return this;
});
/*****************************************
* 使用函数创建对象
* 1 使用函数的闭包实现私有属性
* 2 子对象可以调用父对象的方法
*****************************************/
function employee(name) {
var object = {};
//name属性是私有变量
var name = name;
var getName = function() {
return name;
}
//getName对外公开
object.getName = getName;
return object;
}
function coder(name, language) {
var object = employee(name);
var superGetName = object.getName;
var language = language;
var getLanguage = function() {
return language;
};
//调用父对象的方法
var getName = function() {
return "my name is " + superGetName();
};
object.getName = getName;
return object;
}
var e1 = employee(‘Jack‘);
alert(e1.name);//undefined
alert(e1.getName());//Jack
var c1 = coder(‘Jackson‘, ‘Java‘);
alert(c1.getName());//My name is Jackson
</script>
</BODY>
</HTML>
http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html
http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance_continued.html
others
http://bonsaiden.github.com/JavaScript-Garden/zh/
怕丢了所以全复制个来
原文在http://lazy2009.iteye.com/blog/1675059
原文:http://www.cnblogs.com/935415150wang/p/7355379.html