html怎么新建js,js创建HTML对象和元素

第一种模式:工厂方式

var lev=function(){

return "啊打";

};

function Parent(){

var Child = new Object(); // 或者 var Child= new Object ;

Child.name="李小龙";

Child.age="30";

Child.lev=lev;

Child.showColor2=showColor;

  Child.showColor = function (){

        alert(123);

    } ;    // 记住,这里一定要用 ; 表示结束

return Child; // 不是 return this.Child ; 因为 this.Child===unfined

};

var x = Parent();

alert(x.name);

alert(x.lev());

使用这种方式必须创建对象的方法。每次调用 createCar(),都要创建 showColor(),意味着每一个对象

都有自己的 showColor 版本,事实上,每一个对象都共享了是同一个函数.

有些开发者在工厂函数外定义对象的方法,然后通过属性指向该方法。从而避免这个问题!!!!

function showColor2(){

alert(this.color);

}

var oCar4 = createCar2('black');

oCar4.showColor2();

引用该对象的时候,这里使用的是 var x = Parent()而不是 var x = new Parent();因为后者会可能出现很多问题(前者也成为工厂经典方式,后者称之为混合工厂方式)

第二种模式:构造函数方式   function(){}

var lev=function(){

return "啊打";

};

function Parent(){

this.name="李小龙";

this.age="30";

this.lev=lev;

};

var x =new Parent();

alert(x.name);

alert(x.lev());

与工厂方式相比,使用构造函数方式创建对象,无需再函数内部重建创建对象,而使用this指代,并而函数无需明确return

与第 1个 存在相同问题  方法重复

第3种模式:原型模式  .prototype.

var lev=function(){

return "啊打";

};

function Parent(){

};

Parent.prototype.name="李小龙";

Parent.prototype.age="30";

Parent.prototype.lev=lev;

var x =new Parent();

alert(x.name);

alert(x.lev());不能传递参数, 函数 属性 都共享

alert(pcar1

instanceof

PCar);

//

output "true"

第四种模式:混合的构造函数,原型方式(推荐)

function Parent(){

this.name="李小龙";

this.age=32;

};

Parent.prototype.lev=function(){

return this.name;

};;

var x =new Parent();

alert(x.lev());

说明:     1.该模式是指混合搭配使用构造函数方式和原型方式

2.将所有属性不是方法的属性定义在函数中(构造函数方式)

将所有属性值为方法的属性利用prototype在函数之外定义(原型方式)

第五种模式:动态原型方式(推荐)

function Parent(){

this.name="李小龙";

this.age=32;

;

if(typeof Parent._lev==="undefined"){

Parent.prototype.lev=function(){

return this.name;

}

Parent._lev=true;

}

};

var x =new Parent();

alert(x.lev());

0818b9ca8b590ca3270a3433284dd417.png

/*0818b9ca8b590ca3270a3433284dd417.png  对于习惯使用其他开发语言的开发者来说,使用混合构造函数/原型方式感觉不那么和谐。批评构造函数/原型方式的人

0818b9ca8b590ca3270a3433284dd417.png  认为,在构造函数内找属性,在外部找方法的做法不合理。所以他们设计了动态原型方式,以供更友好的编码风格。

0818b9ca8b590ca3270a3433284dd417.png

0818b9ca8b590ca3270a3433284dd417.png  动态原型方式的基本想法与混合构造函数/原型方式 相同,即在构造函数内定义非函数的属性,而函数的属性则利用

0818b9ca8b590ca3270a3433284dd417.png  原型属性定义。唯一的区别是赋予对象方法的位置。下面是使用动态原型方法重写的 Car 类:

0818b9ca8b590ca3270a3433284dd417.png*/

从而保证创建该对象的实例时,属性的方法不会被重复创建

(推荐使用) 转载创建对象: http://www.cnblogs.com/mizzle/archive/2011/07/06/2099342.html 转载:http://www.ffasp.com/content.asp?newsid=1253

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值