- 浏览: 52268 次
- 性别:
- 来自: 广州
文章分类
最新评论
学习总结:
工厂方式
原始的方式(对象创建后动态定义对象的属性)
创建对象 car,属性:它的颜色是蓝色,有四个门,每加仑油可以跑 25 英里。最后一个属性实际上是指向函数的指针,意味着该属性是个方法。
有一个问题,就是可能需要创建多个 car 的实例。
解决方案:工厂方式(函数封装)
这使两个对象具有相同的属性,却有不同的属性值。
每次调用函数 createCar(),都要创建新函数 showColor(),意味着每个对象都有自己的 showColor() 版本。而事实上,每个对象都共享同一个函数。
在工厂函数外定义对象的方法 可避免以上问题
从功能上讲,这样解决了重复创建函数对象的问题;但是从语义上讲,该函数不太像是对象的方法。
构造函数方式
第一步选择类名,即构造函数的名字。根据惯例,这个名字的首字母大写,以使它与首字母通常是小写的变量名分开。除了这点不同,构造函数看起来很像工厂函数。
与工厂方式的差别:
首先在构造函数内没有创建对象,而是使用 this 关键字。
使用 new 运算符构造函数时,在执行第一行代码前先创建一个对象,只有用 this 才能访问该对象。
然后可以直接赋予 this 属性,默认情况下是构造函数的返回值(不必明确使用 return 运算符)。
现在,用 new 运算符和类名 Car 创建对象,就更像 ECMAScript 中一般对象的创建方式了。
就像工厂函数,构造函数会重复生成函数,为每个对象都创建独立的函数版本。
不过,与工厂函数相似,也可以用外部函数重写构造函数,同样地,这么做语义上无任何意义。这正是下面要讲的原型方式的优势所在。
原型方式
该方式利用了对象的 prototype 属性,可以把它看成创建新对象所依赖的原型。
这里,首先用空构造函数来设置类名。然后所有的属性和方法都被直接赋予 prototype 属性。
在这段代码中,首先定义构造函数(Car),其中无任何代码。
接下来的几行代码,通过给 Car 的 prototype 属性添加属性去定义 Car 对象的属性。
调用 new Car() 时,原型的所有属性都被立即赋予要创建的对象,意味着所有 Car 实例存放的都是指向 showColor() 函数的指针。
从语义上讲,所有属性看起来都属于一个对象,因此解决了前面两种方式存在的问题。
此外,使用这种方式,还能用 instanceof 运算符检查给定变量指向的对象的类型。
原型方式的问题
这个构造函数没有参数。
使用原型方式,不能通过给构造函数传递参数来初始化属性的值,因为 Car1 和 Car2 的 color 属性都等于 "blue",doors 属性都等于 4,mpg 属性都等于 25。
这意味着必须在对象创建后才能改变属性的默认值,真正的问题出现在属性指向的是对象,而不是函数时。
函数共享不会造成问题,但对象却很少被多个实例共享。
属性 drivers 是指向 Array 对象的指针,该数组中包含两个名字 "Mike" 和 "John"。
由于 drivers 是引用值,Car 的两个实例都指向同一个数组。
这意味着给 oCar1.drivers 添加值 "Bill",在 oCar2.drivers 中也能看到。
输出这两个指针中的任何一个,结果都是显示字符串 "Mike,John,Bill"。
由于创建对象时有这么多问题,需要联合使用构造函数和原型方式。
混合的构造函数/原型方式
联合使用构造函数和原型方式,就可像用其他程序设计语言一样创建对象。
这种概念非常简单,即用构造函数定义对象的所有非函数属性,用原型方式定义对象的函数属性(方法)。
结果是,所有函数都只创建一次,而每个对象都具有自己的对象属性实例。
现在就更像创建一般对象了。
所有的非函数属性都在构造函数中创建,意味着又能够用构造函数的参数赋予属性默认值了。
因为只创建 showColor() 函数的一个实例,所以没有内存浪费。
此外,给 oCar1 的 drivers 数组添加 "Bill" 值,不会影响到 oCar2 的数组,所以输出这些数组的值时,oCar1.drivers 显示的是 "Mike,John,Bill",而 oCar2.drivers 显示的是 "Mike,John"。
因为使用了原型方式,所以仍然能利用 instanceof 运算符来判断对象的类型。
动态原型方法
动态原型方法的基本想法与混合的构造函数/原型方式相同,即在构造函数内定义非函数属性,而函数属性则利用原型属性定义。
唯一的区别是赋予对象方法的位置。
直到检查 typeof Car._initialized 是否等于 "undefined" 之前,这个构造函数都未发生变化。
这行代码是动态原型方法中最重要的部分。
如果这个值未定义,构造函数将用原型方式继续定义对象的方法,然后把 Car._initialized 设置为 true。
如果这个值定义了(它的值为 true 时,typeof 的值为 Boolean),那么就不再创建该方法。
简而言之,该方法使用标志(_initialized)来判断是否已给原型赋予了任何方法。
该方法只创建并赋值一次,传统的 OOP 开发者会高兴地发现,这段代码看起来更像其他语言中的类定义了。
混合工厂方式
这种方式通常是在不能应用前一种方式时的变通方法。
它的目的是创建假构造函数,只返回另一种对象的新实例。
这段代码看起来与工厂函数非常相似:
与经典方式不同,这种方式使用 new 运算符,使它看起来像真正的构造函数:
由于在 Car() 构造函数内部调用了 new 运算符,所以将忽略第二个 new 运算符(位于构造函数之外),在构造函数内部创建的对象被传递回变量 car。
这种方式在对象方法的内部管理方面与经典方式有着相同的问题。
强烈建议:除非万不得已,还是避免使用这种方式。
-------------------------------------
如前所述,目前使用最广泛的是混合的构造函数/原型方式。
此外,动态原始方法也很流行,在功能上与构造函数/原型方式等价。
可以采用这两种方式中的任何一种。
不过不要单独使用经典的构造函数或原型方式,因为这样会给代码引入问题。
工厂方式
原始的方式(对象创建后动态定义对象的属性)
var oCar = new Object; oCar.color = "blue"; oCar.doors = 4; oCar.mpg = 25; oCar.showColor = function() { alert(this.color); };
创建对象 car,属性:它的颜色是蓝色,有四个门,每加仑油可以跑 25 英里。最后一个属性实际上是指向函数的指针,意味着该属性是个方法。
有一个问题,就是可能需要创建多个 car 的实例。
解决方案:工厂方式(函数封装)
function createCar(sColor,iDoors,iMpg) { var oTempCar = new Object; oTempCar.color = sColor; oTempCar.doors = iDoors; oTempCar.mpg = iMpg; oTempCar.showColor = function() { alert(this.color); }; return oTempCar; } var oCar1 = createCar("red",4,23); var oCar2 = createCar("blue",3,25); oCar1.showColor(); //输出 "red" oCar2.showColor(); //输出 "blue"
这使两个对象具有相同的属性,却有不同的属性值。
每次调用函数 createCar(),都要创建新函数 showColor(),意味着每个对象都有自己的 showColor() 版本。而事实上,每个对象都共享同一个函数。
在工厂函数外定义对象的方法 可避免以上问题
function showColor() { alert(this.color); } function createCar(sColor,iDoors,iMpg) { var oTempCar = new Object; oTempCar.color = sColor; oTempCar.doors = iDoors; oTempCar.mpg = iMpg; oTempCar.showColor = showColor; return oTempCar; } var oCar1 = createCar("red",4,23); var oCar2 = createCar("blue",3,25); oCar1.showColor(); //输出 "red" oCar2.showColor(); //输出 "blue"
从功能上讲,这样解决了重复创建函数对象的问题;但是从语义上讲,该函数不太像是对象的方法。
构造函数方式
function Car(sColor,iDoors,iMpg) { this.color = sColor; this.doors = iDoors; this.mpg = iMpg; this.showColor = function() { alert(this.color); }; } var oCar1 = new Car("red",4,23); var oCar2 = new Car("blue",3,25);
第一步选择类名,即构造函数的名字。根据惯例,这个名字的首字母大写,以使它与首字母通常是小写的变量名分开。除了这点不同,构造函数看起来很像工厂函数。
与工厂方式的差别:
首先在构造函数内没有创建对象,而是使用 this 关键字。
使用 new 运算符构造函数时,在执行第一行代码前先创建一个对象,只有用 this 才能访问该对象。
然后可以直接赋予 this 属性,默认情况下是构造函数的返回值(不必明确使用 return 运算符)。
现在,用 new 运算符和类名 Car 创建对象,就更像 ECMAScript 中一般对象的创建方式了。
就像工厂函数,构造函数会重复生成函数,为每个对象都创建独立的函数版本。
不过,与工厂函数相似,也可以用外部函数重写构造函数,同样地,这么做语义上无任何意义。这正是下面要讲的原型方式的优势所在。
原型方式
function Car() { } Car.prototype.color = "blue"; Car.prototype.doors = 4; Car.prototype.mpg = 25; Car.prototype.showColor = function() { alert(this.color); }; var oCar1 = new Car(); var oCar2 = new Car();
该方式利用了对象的 prototype 属性,可以把它看成创建新对象所依赖的原型。
这里,首先用空构造函数来设置类名。然后所有的属性和方法都被直接赋予 prototype 属性。
在这段代码中,首先定义构造函数(Car),其中无任何代码。
接下来的几行代码,通过给 Car 的 prototype 属性添加属性去定义 Car 对象的属性。
调用 new Car() 时,原型的所有属性都被立即赋予要创建的对象,意味着所有 Car 实例存放的都是指向 showColor() 函数的指针。
从语义上讲,所有属性看起来都属于一个对象,因此解决了前面两种方式存在的问题。
此外,使用这种方式,还能用 instanceof 运算符检查给定变量指向的对象的类型。
alert(oCar1 instanceof Car); //输出 "true"
原型方式的问题
这个构造函数没有参数。
使用原型方式,不能通过给构造函数传递参数来初始化属性的值,因为 Car1 和 Car2 的 color 属性都等于 "blue",doors 属性都等于 4,mpg 属性都等于 25。
这意味着必须在对象创建后才能改变属性的默认值,真正的问题出现在属性指向的是对象,而不是函数时。
函数共享不会造成问题,但对象却很少被多个实例共享。
function Car() { } Car.prototype.color = "blue"; Car.prototype.doors = 4; Car.prototype.mpg = 25; Car.prototype.drivers = new Array("Mike","John"); Car.prototype.showColor = function() { alert(this.color); }; var oCar1 = new Car(); var oCar2 = new Car(); oCar1.drivers.push("Bill"); alert(oCar1.drivers); //输出 "Mike,John,Bill" alert(oCar2.drivers); //输出 "Mike,John,Bill"
属性 drivers 是指向 Array 对象的指针,该数组中包含两个名字 "Mike" 和 "John"。
由于 drivers 是引用值,Car 的两个实例都指向同一个数组。
这意味着给 oCar1.drivers 添加值 "Bill",在 oCar2.drivers 中也能看到。
输出这两个指针中的任何一个,结果都是显示字符串 "Mike,John,Bill"。
由于创建对象时有这么多问题,需要联合使用构造函数和原型方式。
混合的构造函数/原型方式
function Car(sColor,iDoors,iMpg) { this.color = sColor; this.doors = iDoors; this.mpg = iMpg; this.drivers = new Array("Mike","John"); } Car.prototype.showColor = function() { alert(this.color); }; var oCar1 = new Car("red",4,23); var oCar2 = new Car("blue",3,25); oCar1.drivers.push("Bill"); alert(oCar1.drivers); //输出 "Mike,John,Bill" alert(oCar2.drivers); //输出 "Mike,John"
联合使用构造函数和原型方式,就可像用其他程序设计语言一样创建对象。
这种概念非常简单,即用构造函数定义对象的所有非函数属性,用原型方式定义对象的函数属性(方法)。
结果是,所有函数都只创建一次,而每个对象都具有自己的对象属性实例。
现在就更像创建一般对象了。
所有的非函数属性都在构造函数中创建,意味着又能够用构造函数的参数赋予属性默认值了。
因为只创建 showColor() 函数的一个实例,所以没有内存浪费。
此外,给 oCar1 的 drivers 数组添加 "Bill" 值,不会影响到 oCar2 的数组,所以输出这些数组的值时,oCar1.drivers 显示的是 "Mike,John,Bill",而 oCar2.drivers 显示的是 "Mike,John"。
因为使用了原型方式,所以仍然能利用 instanceof 运算符来判断对象的类型。
动态原型方法
function Car(sColor,iDoors,iMpg) { this.color = sColor; this.doors = iDoors; this.mpg = iMpg; this.drivers = new Array("Mike","John"); if (typeof Car._initialized == "undefined") { Car.prototype.showColor = function() { alert(this.color); }; Car._initialized = true; } }
动态原型方法的基本想法与混合的构造函数/原型方式相同,即在构造函数内定义非函数属性,而函数属性则利用原型属性定义。
唯一的区别是赋予对象方法的位置。
直到检查 typeof Car._initialized 是否等于 "undefined" 之前,这个构造函数都未发生变化。
这行代码是动态原型方法中最重要的部分。
如果这个值未定义,构造函数将用原型方式继续定义对象的方法,然后把 Car._initialized 设置为 true。
如果这个值定义了(它的值为 true 时,typeof 的值为 Boolean),那么就不再创建该方法。
简而言之,该方法使用标志(_initialized)来判断是否已给原型赋予了任何方法。
该方法只创建并赋值一次,传统的 OOP 开发者会高兴地发现,这段代码看起来更像其他语言中的类定义了。
混合工厂方式
这种方式通常是在不能应用前一种方式时的变通方法。
它的目的是创建假构造函数,只返回另一种对象的新实例。
这段代码看起来与工厂函数非常相似:
function Car() { var oTempCar = new Object; oTempCar.color = "blue"; oTempCar.doors = 4; oTempCar.mpg = 25; oTempCar.showColor = function() { alert(this.color); }; return oTempCar; }
与经典方式不同,这种方式使用 new 运算符,使它看起来像真正的构造函数:
var car = new Car();
由于在 Car() 构造函数内部调用了 new 运算符,所以将忽略第二个 new 运算符(位于构造函数之外),在构造函数内部创建的对象被传递回变量 car。
这种方式在对象方法的内部管理方面与经典方式有着相同的问题。
强烈建议:除非万不得已,还是避免使用这种方式。
-------------------------------------
如前所述,目前使用最广泛的是混合的构造函数/原型方式。
此外,动态原始方法也很流行,在功能上与构造函数/原型方式等价。
可以采用这两种方式中的任何一种。
不过不要单独使用经典的构造函数或原型方式,因为这样会给代码引入问题。
发表评论
-
菜单栏和内容
2017-03-10 09:35 554常见的菜单栏+内容界面。欢迎指点。 效果图: 可以戳这里 ... -
javascript 实现购物车页面
2017-02-06 18:46 1668跟商城有关系的网站,难免会有购物车的结账界面。 我用javas ... -
得到两数相除的百分数
2016-12-20 15:42 787原理: Math.ceil() //向上取整 Mat ... -
可拖动的轮播图
2016-11-07 14:55 1640(涉及到swiper.min.js,swiper.min.cs ... -
比较全的屏幕信息
2016-11-07 14:13 430比较全的屏幕信息。 function getInfo ... -
选项卡
2016-11-07 13:47 662欢迎指点! 效果图: 有两种办法实现: 原理一:多个ht ... -
javascript写的轮播图
2016-11-07 12:15 511欢迎指点! 先放上效果图: 鼠标移入界面后: 图片有 ... -
canvas的用法
2016-11-04 14:47 909包括: 介绍。 基础入 ... -
Less的用法
2016-10-31 11:48 564Less常用来写样式,比较多的用法是使用第三方软件编译成CSS ... -
一年及以上经验的前端具备的技术
2016-10-25 15:09 37工作学习之余,在51job,拉勾上搜索了前端这个职位,看了看各 ... -
有关cookie的内容
2016-10-21 13:08 612包括: Cookie概述(Cookie ... -
有关BOM(Browser Object Model)的内容
2016-10-20 17:24 453包括: BOM概述 BOM模型 Window对象(常用属性和方 ... -
JSON的相关内容
2016-10-20 12:38 651包括: JSON概述, JSON语法规则, 使用JSON(JS ... -
原生JavaScript实现jQuery的hasClass,removeClass,addClass,toggleClass
2016-10-13 17:56 1107介绍: 1、hasClass:判断DOM元素是否存在类。 2 ... -
阻止事件冒泡
2016-09-18 15:55 506JavaScript停止冒泡和阻止浏览器默认行为 事件兼容 ... -
实时监听输入框值变化
2016-09-13 10:35 3056(1)使用 jQuery 的话,同时绑定 oninput 和 ... -
js/jQuery实现类似百度搜索功能
2016-09-12 17:00 1150html代码: <!DOCTYPE html> ... -
左侧菜单栏右侧内容(改进,有js效果)
2016-09-09 10:25 4492(如有错敬请指点,以下是我工作中遇到并且解决的问题)上一篇文章 ... -
js生成一周内的日期+周几
2016-09-08 10:41 1344(如有错敬请指点,以下是我工作中遇到并且解决的问题) 效果 ...
相关推荐
JavaScript 中定义类或对象的方式 JavaScript 中定义类或对象有多种方式,包括工厂方式、构造函数方式、原型方式、混合的构造函数/原型方式和动态原型方法。 工厂方式是通过创建并返回特定类型的对象的函数来定义...
JavaScript 中定义类或对象的方式主要有以下五种,每种方式都有其特点和适用场景。 1. 工厂方法 工厂方法是一种创建对象的模式,它通过一个函数来创建并返回对象,而不是直接使用 new 关键字。使用工厂方法可以创建...
在编程领域,动态定义类对象是一项重要的技术,它允许我们在程序运行时根据需求创建或修改类的结构。这种能力在很多场景下非常有用,比如在处理数据模型变化、插件系统或者元编程时。本篇将围绕“根据名称动态定义类...
①定义类的头部 class Pen ②定义类的主体部分,包括变量和方法:变量如colo r,length,price等;方法如Write(),GetPrice()等 ③定义多个构造方法,如Pen(),Pen(参数列表) 2. 定义对象的方法 ①定义公共类Test,则保存...
编写程序,实现图形类的继承,并定义相应类对象并进行测试.txt
通过书籍,个人整理的java基础之类的对象的定义的有关知识点
然而,当涉及到类对象数组时,情况变得复杂,因为VB6不直接支持为类对象数组定义事件。但通过一些技巧,我们可以模拟这个功能。"VB6 给类对象数组定义事件"这个主题正是探讨如何解决这个问题。 首先,我们需要理解...
74.java类的定义与创建对象.zip74.java类的定义与创建对象.zip74.java类的定义与创建对象.zip74.java类的定义与创建对象.zip74.java类的定义与创建对象.zip74.java类的定义与创建对象.zip74.java类的定义与创建对象....
如果变量的个数较少且数量确定,可以直接定义使用类的对象,而如果变量的个数较多或数量不能确定,需要使用new关键字创建对象指针。 此外,使用new关键字还可以发挥虚函数的强大作用,特别是在需要使用虚函数的情况...
通过分析这个文件,我们可以看到实际应用中的类定义和继承实践,包括如何定义类,如何使用构造函数初始化对象,以及如何通过`extends`关键字实现类的继承和覆盖或扩展父类的方法。 总结一下,JavaScript的类、对象...
在 Python 中,关键字 `class` 是定义类所必需的。使用 `class` 关键字,我们可以定义一个类,并指定其属性和方法。 构造函数 构造函数是类的一种特殊方法,用于初始化对象的属性。例如,在类 Person 中,我们可以...
类是创建对象的根源,它定义了同一类对象共有的属性和方法。类中的属性(Attribute)可以理解为对象所拥有的变量,而方法(Method)则是对象可以执行的操作或行为。 对象(Object)是类的实例(Instance),是具有...
本章的"【第5章:面向对象基础】_面向对象、类与对象的定义"将详细讲解面向对象编程的核心概念,包括如何定义类、创建对象,以及如何利用继承和多态性设计高效的程序。通过学习,你将能更好地理解和应用Java的面向...
类的声明和定义在使用类之前,必须先声明它,然后才可以声明变量,并创建对象。类声明的语法如下: ```java [访问控制符] class 类名称 { // 成员变量和方法的声明 } ``` 可以看到,声明类使用的是class关键字。...
对象(Object)则是类的实例,具有类定义的属性和行为。在本实验中,同学们通过定义和使用类来理解和掌握面向对象编程的核心概念。 实验主要目标包括: 1. **类与对象的定义**:类是通过`class`关键字定义的,包含...
1. 编写一个类实现复数的运算。 复数类ComplexNumber的属性: m_dRealPart:实部,代表复数的实数部分。 m_dImaginPart:虚部,代表复数的...2. 编写Java Application程序使用上题定义的类,检查类定义是否正确。
### Java Flex 对象定义与数据类型定义 ...通过上述示例,我们不仅学习了如何定义类和创建对象,还了解了如何选择合适的数据类型来表示对象的不同属性。这些基础知识对于进一步深入Java编程非常有帮助。
"类及类的定义" ...类及类的定义是面向对象程序设计的基础概念,类定义了对象的属性和行为,类的成员变量和方法可以有不同的访问修饰符,类可以继承另一个类的成员变量和方法,类的实例化可以创建类的对象。
- **关键字**: 定义类的关键字是`class`。 - **成员函数访问权限**: 成员函数可以指定为`public`(公有)、`private`(私有)或`protected`(受保护)。 - **数据成员访问权限**: 数据成员同样可以指定为`public`、`...
在编程世界中,创建对象是实现面向对象编程的基础。本文将深入探讨两种常见的对象创建方式...而对于需要长期存在或大小不固定的对象,使用`new`创建更为灵活。理解这两种方式的区别,有助于编写更高效、更健壮的代码。