创建对象的集中常见方式

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

  2 . 工厂模式创建对象

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

  4 . 原型模式创建对象  

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

JS  中基本创建对象的方式 :

var student = new Object();
student.name = "Tom";
student.age = 18;
student.fav = function(){
alert(this.name);
}
student.fav();

使用 字面量方式创建对象 :

    var student = {
name:"91赵先生",
age:18,
fav:function(){
alert(this.name)
}
};
student.fav();

但是有个问题,当我们要创建同类的student1 , student2 .......,代码会重复.所以就有了工厂模式

  2 . 工厂模式创建对象

JS中没有类的概念,那么我们就使用一种函数将以上对象创建过程封装起来,以便于重复使用,同时给出特定出口来初始化对象.

    function createStudent(name,age){
var obj = new Object();
obj.name = name;
obj.age = age;
return name;
} var student1 = createStudent("Tom",18);
var student2 = createStudent("firskt",19) console.log(student1);
console.log(student2);

但是这个也有问题就是不知道出来的数据是哪个类型的.

  比如说我们有定义了个"水果的类型" creatFruit()函数 :

function createFruit(name, color) {
var obj = new Object();
obj.name = name;
obj.color = color;
return obj;
} var v1 = createStudent("easy1", 20);
var v2 = createFruit("apple", "green");

对于以上代码创建的对象v1、v2,我们用instanceof操作符去检测,他们统统都是Object类型

        function createPerson(){
var person = new Object();
person.name = 'Tom'; person.age = 18; person.fav = function() { alert(this.name);
}
return person;
} function createFruit(){
var fruit = new Object();
fruit.name = 'Tom'; fruit.age = 18; fruit.fav = function() { alert(this.name);
}
return fruit;
}
var p1 = createPerson();
var f1 = createFruit(); console.log(p1 instanceof Object);
console.log(f1 instanceof Object); // true true 结果

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

        function Person(name,age) {

            this.name = name;
this.age = age;
this.fav = function() {
alert(this.name);
}
} function Fruit(name,age) { this.name = name;
this.age = age;
this.fav = function() {
alert(this.name);
}
}
var p1 = new Person('firster',17);
var f1 = new Fruit("Tom",19);
console.log(p1 instanceof Object);
console.log(f1 instanceof Object);
console.log(p1 instanceof Person);
console.log(f1 instanceof Fruit);

  4 . 原型模式创建对象

function Student() {
this.name = 'easy';
this.age = 20;
} // Student.prototype 是Student的父类
// 原型指 prototype Student.prototype.alertName = function(){
//this 指 student
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. Day046--JavaScript-- DOM操作, js中的面向对象, 定时

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

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

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

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

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

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

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

  5. 《JS中的面向对象技术》

    内容要点: 1.什么是对象:JS权威指南学习总结-第六章 ,(有句话:一切都是对象) 2.什么面向对象 使用对象时,只关注对象提供的功能,不关注其内部细节,比如jQuery.面向对象是一种通用思想,并 ...

  6. js中的面向对象入门

    什么是对象 我们先来看高程三中是如何对对象进行定义的 "无序属性的集合,其属性可以包括基本值.对象或者函数",对象是一组没有特定顺序的的值.对象的没个属性或方法都有一个俄名字,每个 ...

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

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

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

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

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

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

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

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

随机推荐

  1. Protobuf C#

    // ProtoBuf序列化            using(var file = System.IO.File.Create("Person.bin"))            ...

  2. cordova热更新插件调试

    有更新www目录内容后,首先sencha app build,然后进入 cordova目录 运行 cordova-hcp build, 然后查看 chcp.json文件时间,然后压缩cordova目录 ...

  3. centos7的时间同步机制:chrony使用

    配置时间同步方法如下: 1.安装chrony时间同步服务(系统默认安装) #yum install chrony 可以先查询一下是否有安装: [root@localhost etc]# rpm -qa ...

  4. Git历险记(五)——Git里的分支&合并

    分支与合并 在Git里面我们可以创建不同的分支,来进行调试.发布.维护等不同工作,而互不干扰.下面我们还是来创建一个试验仓库,看一下Git分支运作的台前幕后: $rm -rf test_branch_ ...

  5. ZRender实现粒子网格动画实战

    注:本博文代码基于ZRender 3.4.3版本号开发,相应版本号库地址:ZRender 库. 效果 实现分析 通过上面显示的效果图,能够看出,这样的效果就是在Canvas中生成多个可移动的点,然后依 ...

  6. Solidworks如何圆周阵列

    如图所示,我要把一个圆孔分布八个,切记要选择边线,选择等间距,然后输入8,则自动会变成360度.   最后效果如图所示

  7. /etc/shadow 密码加密方法

    [root@mysql-master ~]# cat /etc/shadowroot:$6$spzQDWctb8Lmju0o$KoUz5Qwv1tWyVYfd5cuBw.TQVIaCvCX8ixGG9 ...

  8. 进程间通信(IPC)介绍(转)

    进程间通信(IPC,InterProcess Communication)是指在不同进程之间传播或交换信息. IPC的方式通常有管道(包括无名管道和命名管道).消息队列.信号量.共享存储.Socket ...

  9. StringBuilder作用

    String 类型和 StringBuffer 类型的主要性能区别其实在于 String 是不可变的对象因此在每次对 String 类型进行改变的时候其实都等同于生成了一个新的 String 对象,然 ...

  10. Content Security Policy

    资料来源:阮一峰博客 一.背景 XSS最常见,危害最大的网页安全漏洞,“网页安全政策”从根本上解决问题 二.简介 CSP的实质是白名单制度,明确告诉客户端那些外部资源可以加载和执行. CSP 大大增强 ...