javescript 的 对象
一,定义:
对象是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 的 对象的更多相关文章
- JaveScript对象(JS知识点归纳七)
1.JS中的对象表示的是一个具体的事物. a)静态的特征=>对象的属性 b)动态的行为=>对象的方法=>保存的值==>函数 2.对象的创建方式 a)构造函数的创建方式 ``` ...
- JaveScript内置对象(JS知识点归纳八)
1)JS自身提供的方式 用于对数据进行简便的操作,根据方法可以操作的数据类型不同,形成了不同的对象--内置对象 2)数组 a)基本操作方法--对数组进行修改 从数组最后进行操作 1)数组.push ...
- JaveScript基础(2)之数据类型转换和常用字符串的操作方法
1.JaveScript数据类型转换: A.转字符串:通过"+"或toString(); PS:如果都是数值类型,'+'会进行求和运算,否则会做字符串连接: var s=2.5;d ...
- JaveScript基础(1)之变量和数据类型
1.JaveScript变量的定义方式: A:隐式定义:直接给变量赋值: temp='hello'; alert(temp); PS:使用变量前要先进行初始化工作,否则会报变量未被定义的错误; B:显 ...
- 在纯JaveScript中实现报表导出:从“PDF”到“JPG”
我们在前端报表中完成了各种工作数据的输入或内容处理之后,需要做什么? 数据的导出! 这些数据的常用导出格式有:PDF.Excel.HTML和图片几大类型. 但总有一些实际应用场景,需要的不仅仅是将现有 ...
- 如何一步一步用DDD设计一个电商网站(九)—— 小心陷入值对象持久化的坑
阅读目录 前言 场景1的思考 场景2的思考 避坑方式 实践 结语 一.前言 在上一篇中(如何一步一步用DDD设计一个电商网站(八)—— 会员价的集成),有一行注释的代码: public interfa ...
- javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈
Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...
- 探究javascript对象和数组的异同,及函数变量缓存技巧
javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...
- Asp.Net WebApi核心对象解析(下篇)
在接着写Asp.Net WebApi核心对象解析(下篇)之前,还是一如既往的扯扯淡,元旦刚过,整个人还是处于晕的状态,一大早就来处理系统BUG,简直是坑爹(好在没让我元旦赶过来该BUG),队友挖的坑, ...
随机推荐
- 多种方式实现AOP
一.使用代理工厂完成声明式增强 1.创建业务接口 public interface IdoSomeService { public void doSomething(); } 2.创建接口实现类 pu ...
- 百万年薪python之路 -- 模块
1.自定义模块 1.1.1 模块是什么? 模块就是文件,存放一堆常用的函数和变量的程序文件(.py)文件 1.1.2 为什么要使用模块? 1.避免写重复代码,从文件级别组织程序,更方便管理 2.可以多 ...
- 课堂动手动脑验证以及自定义异常类实现对异常处理——java异常类
异常(exception):发生在程序执行期间,表明出现了一个非法运行的情况.许多JDK中的方法在检测到非法情况时,都会抛出一个异常对象.例如:数组越界和被0除. 代码验证: package test ...
- vue条件渲染2
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- BFM模型介绍及可视化实现(C++)
BFM模型介绍及可视化实现(C++) BFM模型基本介绍 Basel Face Model是一个开源的人脸数据库,其基本原理是3DMM,因此其便是在PCA的基础上进行存储的. 目前有两个版本的数据库( ...
- 【Spring Boot】java.lang.NoSuchMethodError: org.springframework.web.util.UrlPathHelper.getLookupPathForRequest(Ljavax/servlet/http/HttpServletRequest;Ljava/lang/String;)Ljava/lang/String;
Digest:今天Spring Boot 应用启动成功,访问接口出现如下错误,不知到导致问题关键所在,记录一下这个问题. 浏览器报500错误 项目代码如下 Controller.java packag ...
- SCOI2005 繁忙的都市 [Luogu P2330]
题目描述 城市C是一个非常繁忙的大都市,城市中的道路十分的拥挤,于是市长决定对其中的道路进行改造.城市C的道路是这样分布的:城市中有n个交叉路口,有些交叉路口之间有道路相连,两个交叉路口之间最多有一条 ...
- 关于之前玩emacs记的些笔记
移动 C-v 向前翻页 M-v 向后翻页 C-l 当前行居中显示 继续按会依次到上,下,中 C-x C-c 退出 C-g 退出一个正在运行的命令,还可以取消数字参数和只输入到一半的命令 ...
- Pandas 分组聚合
# 导入相关库 import numpy as np import pandas as pd 创建数据 index = pd.Index(data=["Tom", "Bo ...
- [Usaco 2012 Feb]Cow coupons牛券:反悔型贪心
Description Farmer John needs new cows! There are N cows for sale (1 <= N <= 50,000), ...