Java程序员从笨鸟到菜鸟之（二十九）javascript对象的创建和继承实现

javascript对象的创建
JavaScript中定义对象的几种方式（JavaScript中没有类的概念，只有对象）：
1） 基于已有对象扩充其属性和方法：

var object = new Object();    object.name = "zhangsan";  object.sayName = function(name)  {  	this.name = name;  	alert(this.name);  }    object.sayName("lisi");

2）工厂方式

//工厂方式创建对象    /*  function createObject()  {  	var object = new Object();    	object.username = "zhangsan";  	object.password = "123";    	object.get = function()  	{  		alert(this.username + ", " + this.password);  	}    	return object;  }    var object1 = createObject();  var object2 = createObject();    object1.get();

带参数的构造方法：

function createObject(username, password)  {  	var object = new Object();    	object.username = username;  	object.password = password;    	object.get = function()  	{  		alert(this.username + ", " + this.password);  	}    	return object;  }    var object1 = createObject("zhangsan", "123");  object1.get();

让一个函数对象被多个对象所共享，而不是每一个对象拥有一个函数对象。

function get()  {  	alert(this.username + ", " + this.password);  }    function createObject(username, password)  {  	var object = new Object();    	object.username = username;  	object.password = password;    	object.get = get;    	return object;  }    var object = createObject("zhangsan", "123");  var object2 = createObject("lisi", "456");    object.get();  object2.get();

3）构造函数方式

function Person()  {      //在执行第一行代码前，js引擎会为我们生成一个对象   this.username = "zhangsan";   this.password = "123";     this.getInfo = function()   {    alert(this.username + ", " + this.password);   }     //此处有一个隐藏的return语句，用于将之前生成的对象返回  }    var person = new Person();  person.getInfo();

可以在构造对象时传递参数

function Person(username, password)  {  	this.username = username;  	this.password = password;    	this.getInfo = function()  	{  		alert(this.username + ", " + this.password);  	}  }    var person = new Person("zhangsan", "123");  person.getInfo();

4）原型（“prototype”）方式

//使用原型（prototype）方式创建对象    /*  function Person()  {    }    Person.prototype.username = "zhangsan";  Person.prototype.password = "123";    Person.prototype.getInfo = function()  {  	alert(this.username + ", " + this.password);  }    var person = new Person();  var person2 = new Person();    person.username = "lisi";    person.getInfo();  person2.getInfo();  */

function Person()  {    }    Person.prototype.username = new Array();  Person.prototype.password = "123";    Person.prototype.getInfo = function()  {  	alert(this.username + ", " + this.password);  }    var person = new Person();  var person2 = new Person();    person.username.push("zhangsan");  person.username.push("lisi");  person.password = "456";    person.getInfo();  person2.getInfo();

如果使用原型方式对象，那么生成的所有对象会共享原型中的属性，这样一个对象改变了该属性也会反应到其他对象当中。
单纯使用原型方式定义对象无法在构造函数中为属性赋初值，只能在对象生成后再去改变属性值。
使用原型+构造函数方式来定义对象，对象之间的属性互不干扰，各 个对象间共享同一个方法

//使用原型+构造函数方式来定义对象    function Person()  {  	this.username = new Array();  	this.password = "123";  }    Person.prototype.getInfo = function()  {  	alert(this.username + ", " + this.password);  }    var p = new Person();  var p2 = new Person();    p.username.push("zhangsan");  p2.username.push("lisi");    p.getInfo();  p2.getInfo();

5）动态原型方式：在构造函数中通过标志量让所有对象共享一个方法，而每个对象拥有自己的属性。

function Person()  {  	this.username = "zhangsan";  	this.password = "123";    	if(typeof Person.flag == "undefined")  	{  		alert("invoked");  		  		Person.prototype.getInfo = function()  		{  			alert(this.username + ", " + this.password);  		}    		Person.flag = true;  	}  }    var p = new Person();  var p2 = new Person();    p.getInfo();  p2.getInfo();

JavaScript中的继承。 1） 对象冒充

//继承第一种方式：对象冒充    function Parent(username)  {  	this.username = username;    	this.sayHello = function()  	{  		alert(this.username);  	}  }    function Child(username, password)  {  	//下面三行代码是最关键的代码  	this.method = Parent;  	this.method(username);  	delete this.method;    	this.password = password;    	this.sayWorld = function()  	{  		alert(this.password);  	}  }    var parent = new Parent("zhangsan");  var child = new Child("lisi", "1234");    parent.sayHello();    child.sayHello();  child.sayWorld();

2） call方法方式。
call方法是Function对象中的方法，因此我们定义的每个函数都拥有该方法。可以通过函数名来调用call方法，call方法的第一个参数会被传递给函数中的this，从第2个参数开始，逐一赋值给函数中的参数。

//使用call方式实现对象的继承
function Parent(username)  {   this.username = username;
this.sayHello = function()   {    alert(this.username);   }  }
function Child(username, password)  {   Parent.call(this, username);
this.password = password;
this.sayWorld = function()   {    alert(this.password);   }  }
var parent = new Parent("zhangsan");
var child = new Child("lisi", "123");
parent.sayHello();
child.sayHello();  child.sayWorld();

3） apply方法方式

//使用apply方法实现对象继承    function Parent(username)  {  	this.username = username;    	this.sayHello = function()  	{  		alert(this.username);  	}  }    function Child(username, password)  {  	Parent.apply(this, new Array(username));    	this.password = password;    	this.sayWorld = function()  	{  		alert(this.password);  	}  }      var parent = new Parent("zhangsan");  var child = new Child("lisi", "123");    parent.sayHello();    child.sayHello();  child.sayWorld();

4）原型链方式（无法给构造函数传参数）

//使用原型链（prototype chain）方式实现对象继承    function Parent()  {    }    Parent.prototype.hello = "hello";  Parent.prototype.sayHello = function()  {  	alert(this.hello);  }    function Child()  {    }    Child.prototype = new Parent();    Child.prototype.world = "world";  Child.prototype.sayWorld = function()  {  	alert(this.world);  }    var child = new Child();    child.sayHello();  child.sayWorld();

5）混合方式（推荐）

//使用混合方式实现对象继承(推荐)    function Parent(hello)  {  	this.hello = hello;  }    Parent.prototype.sayHello = function()  {  	alert(this.hello);  }    function Child(hello, world)  {  	Parent.call(this, hello);    	this.world = world;  }    Child.prototype = new Parent();    Child.prototype.sayWorld = function()  {  	alert(this.world);  }    var child = new Child("hello", "world");    child.sayHello();  child.sayWorld();

本文出自 “曹胜欢” 博客，请务必保留此出处http://javacsh.blog.51cto.com/3545281/1129217