创建对象的几种常用方式

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. Sqoop 导入及导出表数据子集命令详解

    Sqoop命令详解 1.import命令 案例1:将mysql表test中的数据导入hive的hivetest表,hive的hivetest表不存在. sqoop import --connect j ...

  2. 导入导出Excel文件

    搭建环境 先新建web project ,然后Add Struts Capabilties: 下载导入导出Excel所需的jar包: poi-3.8-20120326.jar包  :  http:// ...

  3. 各种类型的Json格式化

    using System; using System.Collections.Generic; using System.Text; using System.Data; using System.R ...

  4. C#中数据库事务、存储过程基本用法

    SQL 事务 public bool UpdateQsRegisterSql(List<string> ids, int newQueueId, string newQueueName) ...

  5. ipconfig/all详解

    Ipconfig/all(win+R-->cmd-->ipconfig/all)最常用的就是显示自己主机的ip了,可以让我们了解自己的计算机是否成功的租用到一个IP地址.但是ipconfi ...

  6. ALGO-151_蓝桥杯_算法训练_6-2递归求二进制表示位数

    记: 进制转换 AC代码: #include <stdio.h> #define K 2 int main(void) { ; scanf("%d",&n); ...

  7. Solr4.2 新特性 DocValues [转]

    原文地址http://wiki.apache.org/solr/DocValues DocValues从Lucene4.2和Solr4.2开始加入,通过建立字段的正排索引,提升sorting, fac ...

  8. P2799国王的魔镜

    链接 想了好久(蒟蒻的不能蒟蒻) 题解: #include<iostream>#include<cstdio>#include<cstring>#include&l ...

  9. 继续循环continue

    继续循环continue continue的作用是仅仅跳过本次循环,而整个循环体继续执行. 语句结构: for(初始条件;判断条件;循环后条件值更新) { if(特殊情况) { continue; } ...

  10. 廖雪峰Java5集合-1Java集合简介-1Java结合简介

    1.集合 定义:集合就是一堆东西.集合里的东西,称为元素Element 数学中的集合: 有限集合: * 一个班所有的学生组成的集合 * 一个网站所有的商品组成的集合 无限集合: * 全体自然数集合 * ...