Javascript笔记——对象的几种生成方式

时间:2021-12-06 21:50:43


javascript是一种灵活的语言,虽然不能严格的称之为面对对象,但是也有着某些面对对象的用法。其中生成对象有不少方法,看书总结了以下几种方法。

 

一,利用原生方法

1)利用new关键字构造对象

<script type="text/javascript">
var person = new Object()//用内置对象Object构建对象,
person.name = "python"//给对象添加属性
person.password = 123
person.get = function (){//给对象添加方法alert(this.name + "," + this.password);}
person.get();     //调用对象的get方法  显示 python,123person.name = "ruby"; //重新更改对象的属性person.get();//更改之后调用,属性被修改  显示 ruby,123</script>


2)字面量方法

<script type="text/javascript">
var person = {name:"python",
password:123,
get:function(){
alert(this.name + "," + this.password);
}
}
person.get();         //直接调用对象方法,显示 python,123;person.name = "ruby";  //修改对象的属性person.get();   //显示修改后的对象属性 显示 ruby,123;</script>
 

二,工厂函数的方法

 

1)不传递参数
<script type="text/javascript">
function Person(){
var obj = new Object
obj.name = "python";
obj.password = 123;
obj.get = function (){
alert(this.name + "," + this.password);
}
return obj;
}
var person1 = Person();person2 = Person();alert(person1.name);    //打印对象的属性 pythonperson1.get();   //调用对象实例的方法  显示python,123;person2.get(); //调用对象实例的方法  显示python,123;person1.name = "ruby";  //修改对象实例属性person1.get();//调用对象实例方法,因为修改了属性 显示 ruby,123person2.get();//原对象实例属性不变,显示python,123;</script>

 

2)传递参数

<script type="text/javascript">
function Person(name,number){
var obj = new Object
obj.name = name;
obj.password = number;
obj.get = function (){
alert(this.name + "," + this.password);
}
return obj;
}
var person1 = Person("python",123);
person2 = Person("ruby",123);
alert(person1.name); //打印对象的属性 python
person1.get(); //调用对象实例的方法 显示python,123;
person2.get(); //调用对象实例的方法 显示ruby,123;
</script>
 

3)每次new一个对象实例,方法都会生成一次,出于对性能的考虑,将方法共享。

<script type="text/javascript">
function get(){
alert(this.name + "," + this.password);
}//建立一个共享函数作为对象的方法,使所有实例对象都能共享这一方法。

function Person(name,number){
var obj = new Object
obj.name = name;
obj.password = number;
obj.get = get; //引用共享函数的方法
return obj;}var person1 = Person("python",123);person2 = Person("ruby",123);alert(person1.name);    //打印对象的属性 pythonperson1.get();   //调用对象实例的方法  显示python,123;person2.get(); //调用对象实例的方法  显示ruby,123;</script>


三,构造函数方法

1)不传递参数情况

<script type="text/javascript">
function Person(){
//构造函数没有在构造对象的时候new,但是这一行会隐含产生一个 this
this.name = "python";
this.password = 123;
this.get = function(){
alert(this.name + "," + this.password);
}//构造函数在这里会隐含返回一个对象,即this,Person,因此实例的时候需要new
}
var person1 = new Person();
var person2 = new Person();
alert(person1.name);//打印对象实例的属性 显示 python
person1.get();//打印对象实例的方法 显示 python, 123
person2.get();//打印对象实例的方法 显示 python, 123 两个实例都是同一个对象的引用
person1.name = "ruby";//修改实例对象的属性
person1.get();//打印对象实例的方法 显示 ruby, 123
person2.get();//原对象实例属性没有变,引用也没有变 显示 python,123
</script>


2)传递参数情况

<script type="text/javascript">
function Person(name,password){
//构造函数没有在构造对象的时候new,但是这一行会隐含产生一个 this
this.name = name;
this.password = password;
this.get = function(){
alert(this.name + "," + this.password);
}//构造函数在这里会隐含返回一个对象,即this,Person,因此实例的时候需要new
}
var person1 = new Person("python",123);
var person2 = new Person("ruby",123);
alert(person1.name);//打印对象实例的属性 显示 python
person1.get();//打印对象实例的方法 显示 python, 123
person2.get();//打印对象实例的方法 显示 ruby, 123 两个实例都是同一个对象的引用,但是传递的参数不一样
person1.name = "ruby";//修改实例对象的属性
person1.get();//打印对象实例的方法 显示 ruby, 123
person2.get();//对象实例属性没有变, 显示 ruby,123
</script>


四,原型(prototype)方法
原型方法的最大特点就是成员共享,也就是属性和方法共享。因为每一个对象都有一个prototype属性,如果prototype属性加上了东西,即对象也拥有的东西。原型缺点就是属性不能传递参数。

<script type="text/javascript">
function Person(){
}
Person.prototype.name = "python";
Person.prototype.password = 123;
Person.prototype.get = function (){
alert(this.name + "," + this.password);
}

var person1 = new Person();
var person2 = new Person();
alert(person1.name); //对象实例属性,显示 python
person1.get();//对象实例方法,显示 python,123
person2.get();//对象实例方法,显示 python,123 同一个对象引用

person1.name = "ruby"; //修改对象实例的的属性
person1.get();//对象实例方法引用的的属性改变 显示 ruby,123
person2.get();//对象实例方法,显示 python,123 仍显示原对象引用的属性
</script>


 

五,动态链方法

动态链方法综合了构造+原型的模式,利用构造函数的传递参数定义对象的属性部分,利用原型的共享定义对象的方法。


 

<script type="text/javascript">
function Person(name,password){
this.name = name;
this.password = password
}
Person.prototype.get = function(){
alert(this.name + "," + this.password);
}

var person1 = new Person("python",123);
var person2 = new Person("ruby",123);
alert(person1.name); //对象实例属性,显示 python
person1.get();//对象实例方法,显示 python,123
person2.get();//对象实例方法,显示 ruby,123

person1.name = "perl"; //修改对象实例的的属性
person1.get();//对象实例方法引用的的属性改变 显示 perl,123
person2.get();//对象实例方法,显示 ruby,123
</script>


动态链改进

<script type="text/javascript">
function Person(name,password){
this.name = name;
this.password = password
//将方法也写在一个函数体,但是new的时候仅形成一次
if (Person.flage == undefined){//将原型构造的方法也写在构造函数内,使整体结构清晰
Person.prototype.get = function(){
alert(this.name + "," + this.password);
}
}
Person.flage = true;
}


var person1 = new Person("python",123);
var person2 = new Person("ruby",123);
alert(person1.name); //对象实例属性,显示 python
person1.get();//对象实例方法,显示 python,123
person2.get();//对象实例方法,显示 ruby,123

person1.name = "perl"; //修改对象实例的的属性
person1.get();//对象实例方法引用的的属性改变 显示 perl,123
person2.get();//对象实例方法,显示 ruby,123
</script>