10000个怎么用js写创建li_js中创建对象的几种方式-CSDN博客

本文链接：https://blog.csdn.net/weixin_39574868/article/details/111953334

创建对象指创建一个object并给这个对象添加属性和方法，有以下几个方式：

最基本的：

var Person={};

Person.name='tom';

Person.age='20';

Person.sayname=function(){

alert(this.name);

};

创建了一个Person对象，并添加了name，age属性，还有一个sayname方法。

下面是用构造函数方式创建：

function Person(name,age){

this.name=name;

this.age=age;

this.sayname=function(){

alert(this.name);

};

}

var p1=new Person('yom',0);

var p2=new Person('tom',99);

alert(p1.name);//yom

alert(p2.name); //tom

alert(p1.constructor==p2.constructor);//true

alert(p1 instanceof Person);//true

alert(p2 instanceof Person);//true注意：此时实例化的两个实例p1和p2都源自Person，这两个实例都含有constructor属性，该属性指向其构造函数，alert(p1.constructor==p2.constructor);//true可证明，这种方法的不足之处在于两个实例间相互独立，倘如有大量实例，造成很大内存浪费。

下面用原型方式可以解决实例间的属性不能共享的问题：

function Person(){}

Person.prototype.name='tom';

Person.prototype.age=20;

Person.prototype.sayname=function(){

alert(this.name);

};

var p1=new Person();

alert(p1.name);//tom

alert(p2.name);//tom

alert(p1.name==p2.name);//true上述代码中p1和p2共享Person对象原型中的属性，但，此时并不能通过实例来重写原型中的属性，因为一旦在实例中重新定义属性后就会屏蔽原型中的属性，

因为此时会优先使用实例中的属性，如果实例中没有该属性，那就上找到原型，下面代码中p1使用的是实例中的name属性，p2使用的是原型中的属性：

function Person(){}

Person.prototype.name='tom';

Person.prototype.age=20;

Person.prototype.sayname=function(){

alert(this.name);

};

var p1=new Person();

alert(p1.name);//tom

alert(p2.name);//tom

alert(p1.name==p2.name);//true

p1.name='jim';//通过实例p1来重新定义name属性，屏蔽了原型中的name(只屏蔽，不修改)

alert(p1.name);//jim

alert(p2.name);//依然是tom上面每添加一个属性都要Person.prototype.XX=XX; 很麻烦，可以用字面量的方式一次性定义，但要注意一个问题，那会重写默认的prorotype，使constructor不再指向Person

function Person(){}

Person.prototype={

name:'tom',

age:20,

sayname:function(){

alert(this.name);

}

};

var p1=new Person();

var p2=new Person();

alert(p1.name);//tom

alert(p2.name);//tom

alert(p1.name==p2.name);//true

p1.name='jim';//通过实例p1来重新定义name属性，屏蔽了原型中的name(只屏蔽，不修改)

alert(p1.name);//jim

alert(p2.name);//依然是tom

alert(p1.constructor==Person);//重写了prototype，constructor不再指向Person，但可手动调整要想手动调整在prototype里添加一句就好：

Person.prototype={

constructor:Person,//手动更改

name:'tom',

age:20,

sayname:function(){

alert(this.name);

}

};

手动更改好后：alert(p1.constructor==Person);为true

上面提到，通过p1来重新定义name属性不会影响p2中的name，因为p1重新定义name属性后该属性属于p1这个实例中的属性，p2依然适用原型中的属性，所以不受影响。这里最核心的原因是因为name属性的属性值是js的基本数据类型(alert(typeof Person.name);为string)，不是引用类型，倘若是引用型数据，那改动p1，p2就有影响了，这也是原型方式的不足之处：

function Person(){}

Person.prototype={

constructor:Person,

name:['tom','cat'],//name不再是基本数据类型，而是引用型Array

age:20,

sayname:function(){

alert(this.name);

}

};

var p1=new Person();

var p2=new Person();

alert(p1.name);//tom