最近在看javascript高级程序设计,其中对对象的创建做了具体的阐述,综合起来,总结了下(je知识库javascript专栏由这方面的教程,有兴趣的可以去知识库看看)
第一种模式:工厂方式
Js代码
1.var lev=function(){
2.
3. return "啊打";
4.};
5.function Parent(){
6. var Child = new Object();
7. Child.name="李小龙";
8. Child.age="30";
9. Child.lev=lev;
10. return Child;
11.};
12.
13.var x = Parent();
14.alert(x.name);
15.alert(x.lev());
var lev=function(){
return "啊打";
};
function Parent(){
var Child = new Object();
Child.name="李小龙";
Child.age="30";
Child.lev=lev;
return Child;
};
var x = Parent();
alert(x.name);
alert(x.lev()); 说明:
1.在函数中定义对象,并定义对象的各种属性,,虽然属性可以为方法,但是建议将属性为方法的属性定义到函数之外,这样可以避免重复创建该方法
2.引用该对象的时候,这里使用的是 var x = Parent()而不是 var x = new Parent();因为后者会可能出现很多问题(前者也成为工厂经典方式,后者称之为混合工厂方式),不推荐使用new的方式使用该对象
3.在函数的最后返回该对象
4.不推荐使用这种方式创建对象,但应该了解
第二种模式:构造函数方式
Js代码
1.var lev=function(){
2.
3. return "啊打";
4.};
5.function Parent(){
6.
7. this.name="李小龙";
8. this.age="30";
9. this.lev=lev;
10.
11.};
12.
13.var x =new Parent();
14.alert(x.name);
15.alert(x.lev());
var lev=function(){
return "啊打";
};
function Parent(){
this.name="李小龙";
this.age="30";
this.lev=lev;
};
var x =new Parent();
alert(x.name);
alert(x.lev());
说明:
1.与工厂方式相比,使用构造函数方式创建对象,无需再函数内部重建创建对象,而使用this指代,并而函数无需明确return
2.同工厂模式一样,虽然属性的值可以为方法,扔建议将该方法定义在函数之外
3..同样的,不推荐使用这种方式创建对象,但仍需要了解
第3种模式:原型模式
Js代码
1.var lev=function(){
2.
3. return "啊打";
4.};
5.function Parent(){
6.
7.
8.};
9. Parent.prototype.name="李小龙";
10. Parent.prototype.age="30";
11. Parent.prototype.lev=lev;
12.
13.var x =new Parent();
14.alert(x.name);
15.alert(x.lev());
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()); 说明:
1.函数中不对属性进行定义
2.利用prototype属性对属性进行定义
3.同样的,不推荐使用这样方式创建对象
第四种模式:混合的构造函数,原型方式(推荐)
Js代码
1.function Parent(){
2. this.name="李小龙";
3. this.age=32;
4.
5.};
6.Parent.prototype.lev=function(){
7.
8. return this.name;
9.};;
10.
11.var x =new Parent();
12.
13.alert(x.lev());
function Parent(){
this.name="李小龙";
this.age=32;
};
Parent.prototype.lev=function(){
return this.name;
};;
var x =new Parent();
alert(x.lev()); 说明:1.该模式是指混合搭配使用构造函数方式和原型方式
2.将所有属性不是方法的属性定义在函数中(构造函数方式)
将所有属性值为方法的属性利用prototype在函数之外定义(原型方式)
3.推荐使用这样方式创建对象,这样做有好处和为什么不单独使用构造函数方式和原型方式,由于篇幅问题这里不予讨论
第五种模式:动态原型方式
Js代码
1.function Parent(){
2. this.name="李小龙";
3. this.age=32;
4.;
5. if(typeof Parent._lev=="undefined"){
6.
7.
8. Parent.prototype.lev=function(){
9.
10. return this.name;
11. }
12. Parent._lev=true;
13. }
14.
15.};
16.
17.
18.var x =new Parent();
19.
20.alert(x.lev());
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()); 说明:
1.动态原型方式可以理解为混合构造函数,原型方式的一个特例
2.该模式中,属性为方法的属性直接在函数中进行了定义,但是因为
Js代码
1.if(typeof Parent._lev=="undefined"){
2.
3.
4. Parent._lev=true;}
if(typeof Parent._lev=="undefined"){
Parent._lev=true;}
从而保证创建该对象的实例时,属性的方法不会被重复创建
3.,推荐使用这种模式
分享到:
相关推荐
综合以上知识,`js 面向对象实例`涵盖了JavaScript中的面向对象编程基础,以及如何将这些概念应用到HTML5 Canvas的实践中。通过学习和实践这个实例,你不仅可以理解JavaScript的OOP机制,还能掌握如何利用Canvas API...
然而,实例化允许开发者通过共享相同的几何数据,仅改变每个实例的属性(如位置、旋转、缩放)来创建多个对象,从而显著提升渲染效率。 在“实例化.html”文件中,很可能展示了如何设置WebGL上下文,定义一个基本的...
JavaScript,虽然它不是一种纯面向对象的语言,但仍然支持对象实例化。我们可以使用构造函数或原型链来实现: ```javascript function Person(name, age) { this.name = name; this.age = age; } var person1 = ...
一、JS对象实例的创建 1. 构造函数创建 构造函数是一种特殊类型的函数,用于创建和初始化特定类型的对象。例如: ```javascript function Person(name, age) { this.name = name; this.age = age; } var person1 =...
在编程领域,实例化是创建对象的关键步骤,它允许我们使用类定义来创建具有特定属性和行为的对象。在本实例中,我们将深入探讨如何通过代码实现动态效果的实例化,以便在应用程序中创建直观且引人入胜的用户体验。 ...
请问这以下两种实例化对象方式有什么区别呢? var mefun1 = new Me('fei','20','it'); var mefun2 = Me('fei','20','it'); 简单的说 第一种是构造函数式,即通过new运算符调用构造函数Function来创建函数 第二种...
- 类成员属性一般不在声明时直接赋予初值,而是在对象实例化之后通过方法进行赋值。 - 利用构造函数和析构函数来控制对象的创建和销毁过程。 - 遵循面向对象编程的原则,如封装、继承和多态性。 通过本篇笔记的学习...
JavaScript内置的`JSON.parse()`和`JSON.stringify()`方法方便了JSON与JavaScript对象之间的转换。 7. **函数与闭包**:JavaScript中的函数不仅是代码块,还可以作为值传递和存储。闭包是JavaScript中一个强大的...
本"JS实例大全"聚焦于展示JavaScript在实际应用中的各种功能和技巧,帮助开发者更好地理解和掌握这门语言。 一、基础语法与数据类型 JavaScript的基础语法包括变量声明(var、let、const)、数据类型(如字符串、...
在这个例子中,我们创建了一个`Pasta`构造函数并实例化了一个`spaghetti`对象。通过`Object.keys(spaghetti)`,我们可以得到一个包含所有属性名称的数组。需要注意的是,“toString”方法也被视为一个属性,因此它...
我们可以通过`new`关键字来调用构造函数,创建一个新的对象实例。例如: ```javascript function Person(name) { this.name = name; } var person1 = new Person('Alice'); ``` 在这个例子中,`Person`是构造...
总之,JSON与JavaScript对象之间的序列化和反序列化是数据交换的核心,它简化了客户端与服务器之间的数据交互,同时也提高了数据的可移植性和可读性。了解并熟练掌握JSON的使用,对于任何Web开发者来说都是至关重要...
JavaScript,简称JS,是Web开发中的重要脚本语言,用于实现客户端...以上就是"JS经典实例代码"所涵盖的主要知识点,通过学习和实践这些实例,开发者可以掌握JavaScript的精髓,为构建功能丰富的网页应用打下坚实基础。
例如,创建一个对象实例后,可以使用Reflect.get和Reflect.set来动态读取和设置属性,使用Reflect.has来检查属性是否存在,使用Reflect.ownKeys来获取对象所有属性键的列表等。 此外,反射机制也常用于框架和库的...
**jsTree 实例详解** jsTree 是一个流行的 JavaScript 库,专门用于创建、操作和展示交互式的树型结构。在 Web 开发中,它常被用于构建目录结构、组织数据或者构建导航菜单。jsTree 提供了丰富的 API 和多种主题,...
根据提供的标题、描述、标签及部分内容,我们可以总结出本文主要关注的是JavaScript中实现的一个经典实例——霓虹灯特效。为了更好地理解这一知识点,我们将从以下几个方面进行深入探讨: ### 一、JavaScript简介 ...
在JavaScript中,实现类的仿实例化是一种设计模式,它模拟了面向对象编程中的类实例化行为,但并不依赖于JavaScript的原型继承或者ES6中引入的class关键字。下面将结合给定文件内容,详细解释JavaScript仿实例化的...
9. **数据可视化**:JavaScript库如D3.js、Chart.js和Highcharts可以将复杂的数据转化为易于理解的图表和图形。 10. **Websocket**:JavaScript可以实现Websocket协议,提供实时双向通信,常用于在线聊天、实时股票...
你可能会看到如何解析JSON字符串为JavaScript对象,或者将对象转换为JSON字符串。 7. **面向对象编程**:JavaScript支持基于原型的面向对象编程,实例可能包含构造函数、原型链、继承和封装等概念的示例。 8. **...