一,定义:
对象是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. postman设置环境变量与全局变量

    1.环境变量可以设置多组 设置环境变量 编辑环境变量 2.全局变量只能设置一组 可以在Pre-request Script和Tests中设置全局变量 如:pm.globals.set("na ...

  2. ubuntu 虚拟机设置静态ip

    $ sudo vim /etc/network/interfaces auto ens33   # 使用的网络接口,之前查询接口是为了这里     iface ens33 inet static    ...

  3. GO基础之流程控制语句

    一.if分支语句 if 布尔表达式 1 { /* 在布尔表达式 1 为 true 时执行 */ } ; a% == { fmt.Println("偶数") } if 布尔表达式 1 ...

  4. 基于Java的开源爬虫框架WebCollector的使用

    一.WebCollector介绍 WebCollector是一个无须配置.便于二次开发的JAVA爬虫框架(内核),它提供精简的的API,只需少量代码即可实现一个功能强大的爬虫. WebCollecto ...

  5. Java基础(十五)异常(Exception)

    1.处理错误的要求 如果由于出现错误而使得某些操作没有完成,程序应该: 返回到一种安全状态,并能够让用户执行一些其他的命令. 允许用户保存所有操作的结果,并以妥善的方式终止程序. 2.程序中可能出现的 ...

  6. Java基础(十四)代理(Proxy)

    1.为什么要使用代理 代理可以在运行时创建一个实现了一组给定接口的新类.这种功能只有在编译时无法确定需要实现哪个接口时才有必要使用. 假设有一个表示接口的Class对象(有可能只包含一个接口),它的确 ...

  7. SpringBoot与MybatisPlus3.X整合之通用枚举(十二)

    一 通用枚举 解决了繁琐的配置,让 mybatis 优雅的使用枚举属性! 自3.1.0开始,可配置默认枚举处理类来省略扫描通用枚举配置 默认枚举配置 升级说明: 3.1.0 以下版本改变了原生默认行为 ...

  8. vue引入css文件报错Unrecognised input

    一个vue项目中用到了swiper插件,引入swiper.css时报错 显示引入的css文件Unrecognised input ,在文件的line4,column12 . 其实是引入位置不对,样式文 ...

  9. 键盘常见ascii码值

    回车事件最常见,码值13 ESC键: VK_ESCAPE (27) 回车键: VK_RETURN (13) TAB键: VK_TAB (9) Caps Lock键: VK_CAPITAL (20) S ...

  10. Coremail接口存配置读取漏洞POC

    Coremail产品诞生于1999年,经过二十多年发展,如今从亿万级别的运营系统,到几万人的大型企业,都有了Coremail的客户. 截止2019年,Coremail邮件系统产品在国内已拥有10亿终端 ...