创建对象的几种常用方式

1.使用Object或对象字面量创建对象

2.工厂模式创建对象

3.构造函数模式创建对象

4.原型模式创建对象

1.使用Object或对象字面量创建对象

使用object

var student = new Object();
student.name = "easy";
student.age = "20";

使用字面量

var sutdent = {
name : "easy",
age : 20
};

2.工厂模式创建对象

function createStudent(name, age) {
var obj = new Object();
obj.name = name;
obj.age = age;
return obj;
} var student1 = createStudent("easy1", 20);
var student2 = createStudent("easy2", 20);
...
var studentn = createStudent("easyn", 20);

3.构造函数模式创建对象

在上面创建Object这样的原生对象的时候,我们就使用过其构造函数

var obj = new Object();

在创建原生数组Array类型对象时也使用过其构造函数:

var arr = new Array(10);  //构造一个初始长度为10的数组对象

我们首先了解一下构造函数普通函数有什么区别。

1、实际上并不存在创建构造函数的特殊语法,其与普通函数唯一的区别在于调用方法。对于任意函数,使用new操作符调用,那么它就是构造函数;不使用new操作符调用,那么它就是普通函数。

2、按照惯例,我们约定构造函数名以大写字母开头,普通函数以小写字母开头,这样有利于显性区分二者。例如上面的new Array(),new Object()。

3、使用new操作符调用构造函数时,会经历(1)创建一个新对象;(2)将构造函数作用域赋给新对象(使this指向该新对象);(3)执行构造函数代码;(4)返回新对象;4个阶段。

ok,了解了构造函数普通函数的区别之后,我们使用构造函数将工厂模式的函数重写,并添加一个方法属性:

function Student(name, age) {
this.name = name;
this.age = age;
this.alertName = function(){
alert(this.name)
};
} function Fruit(name, color) {
this.name = name;
this.color = color;
this.alertName = function(){
alert(this.name)
};
}

这样我们再分别创建Student和Fruit的对象

var v1 = new Student("easy", 20);
var v2 = new Fruit("apple", "green");

这时我们再来用instanceof操作符来检测以上对象类型就可以区分出Student以及Fruit了:

alert(v1 instanceof Student);  //true
alert(v2 instanceof Student); //false
alert(v1 instanceof Fruit); //false
alert(v2 instanceof Fruit); //true alert(v1 instanceof Object); //true 任何对象均继承自Object
alert(v2 instanceof Object); //true 任何对象均继承自Object

可以将上面的函数简化:Student和Fruit对象中共有同样的方法移到构造函数外部

function Student(name, age) {
this.name = name;
this.age = age;
}
function Fruit(name, color) {
this.name = name;
this.color = color;
}; function alertName() {
alert(this.name);
}

我们通过将alertName()函数定义为全局函数,这样对象中的alertName属性则被设置为指向该全局函数的指针。由此stu1和stu2共享了该全局函数,解决了内存浪费的问题

但是,通过全局函数的方式解决对象内部共享的问题,终究不像一个好的解决方法。如果这样定义的全局函数多了,我们想要将自定义对象封装的初衷便几乎无法实现了。

更好的方案是通过原型对象模式来解决。

4.原型的模式创建对象

原型链甚至原型继承,是整个JS中最难的一部分也是最不好理解的一部分,在这里由于我们课程定位的原因,如果对js有兴趣的同学,可以去查阅一下相关JS原型的一些知识点。

function Student() {
this.name = 'easy';
this.age = 20;
} Student.prototype.alertName = function(){
alert(this.name);
}; var stu1 = new Student();
var stu2 = new Student(); stu1.alertName(); //easy
stu2.alertName(); //easy alert(stu1.alertName == stu2.alertName); //true 二者共享同一函数

js中的面向对象--类似于类的概念的更多相关文章

  1. 深入解读 Js 中的面向对象编程

    前言:今天看了一篇文章觉得很不错,所以给大家分享一下,也许很多人都看过面向对象编程甚至写过这样博客,觉得面向对象编程就那样,没啥好说的,那可能是因为你对这方面知识已经了解,可以选择性跳过.那如果有更通 ...

  2. Day046--JavaScript-- DOM操作, js中的面向对象, 定时

    一. DOM的操作(创建,追加,删除) parentNode 获取父级标签 nextElementSibling 获取下一个兄弟节点 children 获取所有的子标签 <!DOCTYPEhtm ...

  3. 前端 ---JS中的面向对象

    JS中的面向对象   创建对象的几种常用方式 1.使用Object或对象字面量创建对象 2.工厂模式创建对象 3.构造函数模式创建对象 4.原型模式创建对象 1.使用Object或对象字面量创建对象 ...

  4. python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...

  5. 前端JavaScript(3)-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息

    小例子: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...

  6. js中使用function定义类、实例化,函数的调用方法

    function Test002(name, age){ name, age, this.printInfo = function(){ //定义的公有方法 console.log(name, age ...

  7. 22.python中的面向对象和类的基本语法

    当我发现要写python的面向对象的时候,我是踌躇满面,坐立不安呀.我一直在想:这个坑应该怎么爬?因为python中关于面向对象的内容很多,如果要讲透,最好是用面向对象的思想重新学一遍前面的内容.这个 ...

  8. js中的面向对象程序设计

    面向对象的语言有一个标志,即拥有类的概念,抽象实例对象的公共属性与方法,基于类可以创建任意多个实例对象,一般具有封装.继承.多态的特性!但JS中对象与纯面向对象语言中的对象是不同的,ECMA标准定义J ...

  9. 轻松理解JS中的面向对象,顺便搞懂prototype和__proto__

    这篇文章主要讲一下JS中面向对象以及 __proto__,ptototype和construcator,这几个概念都是相关的,所以一起讲了. 在讲这个之前我们先来说说类,了解面向对象的朋友应该都知道, ...

随机推荐

  1. 电信版华为MATE7 EMUI4.0回退3.1和3.0教程与中转包

    mate7升级6.0后遇到很多问题,想回退版本,找了很多教程,现在总结一下用中转包回退.EMUI4.0回退3.1,先下载B500中转包,将dload复制到2G以上内存卡根目录,不要三键强刷,会卡在开机 ...

  2. maven添加自定义jar

    mvn install:install-file -Dfile=自定义jar文件路径 -DgroupId=所属组 -DartifactId=项目名 -Dversion=版本 -Dpackaging=j ...

  3. 使用 Visual Studio 分析器找出应用程序瓶颈

    VS的性能分析工具 性能分析工具的选择 打开一个“性能分析”的会话:Debug->Start Diagnotic Tools Without Debugging(或按Alt+F2),VS2013 ...

  4. 求1~n整数中1出现的次数(《剑指offer》面试题43)

    题意: 给定一个整数n,求1~n这n个整数中十进制表示中1出现的次数. 思路: 方法1:最直观的是,对于1~n中的每个整数,分别判断n中的1的个数,具体见<剑指offer>.这种方法的时间 ...

  5. 【问题解决】docker中创建volume时,无访问权限

    挂载宿主机已存在目录后,在容器内对其进行操作,报"Permission denied". 可通过两种方式解决: 1> 关闭selinux. 临时关闭:# setenforce ...

  6. NodeJs递归删除非空文件夹

    此篇博文由于第一次使用fs.unlink()删除文件夹时报“Error: EPERM: operation not permitted, unlink”错误而写,这是因为fs.unlink()只能删除 ...

  7. 廖雪峰Java1-3流程控制-9break、continue

    break跳出循环 int sum=0; for(int i=1; ;i++) { sum =sum + i; if(i == 100) { break; } } System.out.println ...

  8. 网站优化URL需要注意的几个细节

     原文地址:http://www.douban.com/note/474016612/   一个好的URL结构无论是对搜索引擎,还是用户,都具有非常重要的作用,那么什么样的URL才是既能面向搜索引擎, ...

  9. Ring0创建事件Ring3设置事件

    同步事件(synchronizationEvent)当事件对象为激发时,如遇到KeWaitForXX等内核函数,事件对象则自动变回未激发态通知事件(NotificationEvent)当事件对象为激发 ...

  10. mysql默认8小时连接断开机制解决

    转载连接:http://www.myexception.cn/database/1639209.html 本文提供了对c3p0与DBCP连接池连接MySql数据库时, 8小时内无请求自动断开连接的解决 ...