一,定义:
对象是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. H5实现图表和地图

    H5实现图表和地图的代码如下: <!DOCTYPE html> <html> <head> <title>图表和地图</title> < ...

  2. ASP.NET Core中的配置

    配置 参考文件点击跳转 配置来源 命令行参数 自定义提供程序 目录文件 环境变量 内存中的.NET 对象 文件 默认配置 CreateDefaultBuilder方法提供有默认配置,在这个方法中会接收 ...

  3. Java基础(41)AbstractList类

    AbstractList类的子类有AbstractSequentialList(其子类是LinkedList)和ArrayList 1.LinkedList 定义 public class Linke ...

  4. C语言存储类别和链接

    目录 C语言存储类别和链接 存储类别 存储期 五种存储类别 C语言存储类别和链接 ​ 最近详细的复习C语言,看到存储类别的时候总感觉一些概念模糊不清,现在认真的梳理一下.C语言的优势之一能够让程序员恰 ...

  5. (Java) 模拟http请求调用远程接口

    package com.vcgeek.hephaestus.utils; import java.io.BufferedReader; import java.io.IOException; impo ...

  6. Linux性能分析

    生产环境服务器变慢,诊断思路和性能评估 整机:top 代码 public class JavaDemo2 { public static void main(String[] args) { whil ...

  7. Linux 命令行获取天气

    目标: 使用 Linux 命令行显示天气预报. 发行版: 所有 Linux 发行版. 要求: 能连上因特网的 Linux 难度: 容易 约定: # - 需要使用 root 权限来执行指定命令,可以直接 ...

  8. 中级前端必备知识点(2.5w+月薪)进阶 (分享知乎 : 平酱的填坑札记 关注专栏 用户:安大虎)

    前端已经不再是5年前刚开始火爆时候的那种html+css+js+jquery的趋势了,现在需要你完全了解前端开发的同时,还要具备将上线.持续化.闭环.自动化.语义化.封装......等概念熟练运用到工 ...

  9. [考试反思]1026csp-s模拟测试88:发展

    不用你们说,我自己来:我颓闪存我没脸. 昨天的想法, 今天的回答. 生存, 发展. 总分榜应该稍有回升,但是和上面的差距肯定还是很大. 继续. 为昨天的谬误,承担代价. T2和T3都值得张记性. T2 ...

  10. MySQL 语句执行过程详解

    MySQL 原理篇 MySQL 索引机制 MySQL 体系结构及存储引擎 MySQL 语句执行过程详解 MySQL 执行计划详解 MySQL InnoDB 缓冲池 MySQL InnoDB 事务 My ...