一,定义:
对象是JavaScript的一个基本数据类型,是一种复合值,它将很多值(原始值或者其他对象)聚合在一起,可通过名字(name/作为属性名)访问这些值。即属性的无序集合。

关键是name属性名可以是什么类型,以下是一些测试(不完整):

 二,创建对象的方法

1.在{}内直接创建键值对,如上测试示例

2.使用实例化类的方法:new + Object()

let car = new Object(); //实际上,car.type的写法最终在后台自动转为car['type']执行的
car.type = 'Honda'; //等同于car['type'] = 'Honda'
car.color = 'white'; //等同于 car['color'] = 'white'
cat.seat = ; //等同于 cat['seat'] = 5
car.sayColor = function(){alert(this.color)}

由于1,2两种方法在使用同一接口创建多个对象时,会产生大量的重复代码,为此,有了工厂模式

3.工厂模式--函数返回的形式

function creaeCar(type,color,seat){
let obj = new Object();
obj.type = type;
obj.color = color;
obj.seat = seat;
obj.sayColor = function(){alert(this.color)}
return obj;
} let car01 = createCar('Honda','white',5);//instanceof 无法判断它是谁的实例,只能判断是对象 person1 instanceof Object //true

由于工厂模式没有解决对象的识别问题,检测到的都是object类型,不像是具体的Array,Date等类型,因此又出现了构造函数模式的创建方法。

4.构造函数模式

 function Car(type,color,seat){
this.type = type;
this.color = color;
this.seat = seat;
this.sayColor = function(){alert(this.color)}
} let car01 = Car('Honda','white',5); //此时car01 instanceof Car //true
console.log(Car.constructor);//返回创建此对象的数组,函数的引用

有上例可以看出工厂模式和构造函数模式的不同之处:

(1)没有显式地创建对象;(2)直接将属性和方法赋给了this对象;(3)没有return语句

实际上,调用构造函数的过程如下:

创建一个新对象==》将构造函数的作用域赋给新对象,即是将this指向这个新对象==》执行构造函数,为新对象添加属性==》自动返回新对象

不过构造函数也是有缺陷的,每个实例都包含不同的function实例,构造函数内的方法在做同一件事,但是实例化后却产生了不同的对象(方法sayColor是函数,函数也是对象)。

因此又产生了原型模式。

5.原型模式

function Car(){}

Car.prototype.type = 'Honda';  //相当于python中公共的类变量
Car.prototype.color = 'white';
Car.prototype.seat = 5;
Car.prototype.sayColor = function(){aleart(this.color)}; console.log(Car.prototype);//Object {type:'Honda',color:'white',seat:5} let car01 = new Car();
console.log(car01.type);//Honda
let car02 = new Car();
car02.color = 'red';
console.log(car02);//Car {color:'red'}
console.log(car02.prototype.color); //报错的
console.log(car02.type); // 显示的将会是原型默认的‘Honda'

原型模式的好处是所有实例共享它的属性和方法,即公共属性,可以设置私有属性值,如car02.color='red',只是针对实例car02,将覆盖原型对象上的同名属性(方法)。

6.混合模式(构造函数+原型模式

构造函数模式用于定义实例属性,原型模式用于定义方法和共享属性

function Car(type,color,seat){
this.type = type;
this.color = color;
this.seat = seat;
} Car.prototype = {
constructor: Car, //每个函数都有prototype属性,指向该函数原型对象,原型对象都有constructor属性,这是一个指向prototype属性所在函数的指针
sayColor: function(){
alert(this.color);
}
} let car01 = new Car("Honda",'white',5);
console.log(car01);
let car02 = new Car("BMW",'blue',2);
console.log(car02);

可以看出,混合模式共享着对相同方法的引用,又保证了每个实例有自己的私有属性。最大限度的节省了内存

https://www.cnblogs.com/libin-1/p/5911190.html

https://www.cnblogs.com/juggdxy/p/8245491.html

javescript 的 对象的更多相关文章

  1. JaveScript对象(JS知识点归纳七)

    1.JS中的对象表示的是一个具体的事物. a)静态的特征=>对象的属性 b)动态的行为=>对象的方法=>保存的值==>函数 2.对象的创建方式 a)构造函数的创建方式 ``` ...

  2. JaveScript内置对象(JS知识点归纳八)

    1)JS自身提供的方式 用于对数据进行简便的操作,根据方法可以操作的数据类型不同,形成了不同的对象--内置对象 2)数组 ​ a)基本操作方法--对数组进行修改 从数组最后进行操作 1)数组.push ...

  3. JaveScript基础(2)之数据类型转换和常用字符串的操作方法

    1.JaveScript数据类型转换: A.转字符串:通过"+"或toString(); PS:如果都是数值类型,'+'会进行求和运算,否则会做字符串连接: var s=2.5;d ...

  4. JaveScript基础(1)之变量和数据类型

    1.JaveScript变量的定义方式: A:隐式定义:直接给变量赋值: temp='hello'; alert(temp); PS:使用变量前要先进行初始化工作,否则会报变量未被定义的错误; B:显 ...

  5. 在纯JaveScript中实现报表导出:从“PDF”到“JPG”

    我们在前端报表中完成了各种工作数据的输入或内容处理之后,需要做什么? 数据的导出! 这些数据的常用导出格式有:PDF.Excel.HTML和图片几大类型. 但总有一些实际应用场景,需要的不仅仅是将现有 ...

  6. 如何一步一步用DDD设计一个电商网站(九)—— 小心陷入值对象持久化的坑

    阅读目录 前言 场景1的思考 场景2的思考 避坑方式 实践 结语 一.前言 在上一篇中(如何一步一步用DDD设计一个电商网站(八)—— 会员价的集成),有一行注释的代码: public interfa ...

  7. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

  8. 探究javascript对象和数组的异同,及函数变量缓存技巧

    javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...

  9. Asp.Net WebApi核心对象解析(下篇)

    在接着写Asp.Net WebApi核心对象解析(下篇)之前,还是一如既往的扯扯淡,元旦刚过,整个人还是处于晕的状态,一大早就来处理系统BUG,简直是坑爹(好在没让我元旦赶过来该BUG),队友挖的坑, ...

随机推荐

  1. 玩转ArduinoJson库 V5版本

    1.前言     一直以来,博主的事例代码中都一直使用到JSON数据格式.而很多初学者一直对JSON格式有很大疑惑,所以博主特意分出一篇博文来重点讲解Arduino平台下的JSON库--Arduino ...

  2. [洛谷P3613]睡觉困难综合症

    写码30min,调码3h的题.. 好在最后查出来了 , , n, x, y, z); 改成了 , , n, mark[x], y, z); 然后$40\rightarrow 100$ #include ...

  3. jquery 往上滚动的时显示,上下滚动执行的js

    $(document).on("mousewheel DOMMouseScroll", function (e) { var delta = (e.originalEvent.wh ...

  4. redis之PubSub

    前面我们讲了 Redis 消息队列的使用方法,但是没有提到 Redis 消息队列的不足之处,那就是它不支持消息的多播机制. 消息多播 消息多播允许生产者生产一次消息,中间件负责将消息复制到多个消息队列 ...

  5. Spring Data - Spring Data JPA 提供的各种Repository接口

    Spring Data Jpa 最近博主越来越懒了,深知这样不行.还是决定努力奋斗,如此一来,就有了一下一波复习 演示代码都基于Spring Boot + Spring Data JPA 传送门: 博 ...

  6. Linux命令比较文件内容

    文件准备 创建两个文件,分别为a.txt和b.txt,它们所含内容分别为: a.txt b.txt 1-wfhune2-chdamnsbchj3-uyr92fiubkqw5-cgvdnsb 2-djy ...

  7. SpringBoot整合FastJson(七)

    一.Maven依赖 <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson&l ...

  8. Linux杂谈:解决配置静态ip后eth0网卡启动不了的问题

    今天在看imooc上的<Linux网络管理>的课程中,在做一些实验时修改了下网络配置,发现了一些问题,就是保存网络配置后eth0网卡打不开,可能也会有很多人出现这类问题,我就在这里分享下自 ...

  9. shell 脚本中的注释详解

    上次写了shell脚本的注释,没想到那么多人的需要,也存在不少不足.这次做个补充吧. 单行注释: 单行注释就比较简单了,直接在行最前端加上符号 # 即可.具体用法如下所示: # this is com ...

  10. java中Arrays.sort()对二位数组进行排序

    int [][]a = new int [5][2]; //定义一个二维数组,其中所包含的一维数组具有两个元素 对于一个已定义的二位数组a经行如下规则排序,首先按照每一个对应的一维数组第一个元素进行升 ...