JS对象详解_js撖寡情-程序员宅基地

技术标签: JavaScript  前端  javascript  

JS对象详解

js的对象是什么?js的对象类型有哪些?具体实例是什么?

一、ECMA-262对JS对象的定义:

属性的无序集合,每个属性存放一个原始值、对象或函数;
对象是无特定顺序的值的数组;
对象是一种特殊的数据类型,可以包含多个成员。

对象成员:Property、Method。(Object=Property+Method)
属性(Property):对象名、属性名。封装对象的数据,表示与对象有关的值;
方法(Method):对象名、方法名。封装对象的行为,表示对象可以执行的行为或可以完成的功能;

二、JS的对象类型:
1. 内部对象:原生对象/内置对象

1)原生对象,ECMAScript提供的需要实例化(new)才能使用的对象

Object对象、Function对象、Array 对象、Boolean 对象、Date 对象、Number 对象、String对象、RegExp 对象、运算符、Error、Set对象、Map对象、Proxy 对象

      原生对象常用方法:
      
      ①、Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
      
      ②、Object.create() 方法用于创建一个新对象。被创建的对象会继承另一个对象的原型,在创建新对象时还可以指定一些属性。
      
      ③、Object.defineProperties() 直接在一个对象上定义新的属性或修改现有属性,并返回该对象。
      
      ④、Object.keys() 遍历对象,返回一个数组,包含了该对象自身的所有可枚举属性名
      
      ⑤、Object.getOwnPropertyNames() 遍历对象,返回一个数组,包含了该对象自身的可枚举和不可枚举属性名
      
      ⑥、Object.is() 方法用于判断两个值是否是相同的值
      
      ⑦、Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组,其排列与使用
      for...in循环遍历该对象时返回的顺序一致
      
      ⑧、Object.freeze()
      方法可以冻结一个对象。一个被冻结的对象再也不能被修改;冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性、可配置性、可写性,以及不能修改已有属性的值。
      
      此外,冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。

2)内置对象,ECMAScript提供的不需要实例化就能使用的对象

Global (全局对象)和 Math对象

2. 宿主对象

宿主对象就是执行JS脚本的环境提供的对象,是浏览器提供的对象,用于完善ECMAScript 执行环境。早期存在较⼤的兼容性问题,当前其中⼀些主要的对象已经被⼤部分浏览器兼容,具体分为如下两⼤类:
1)BOM对象(Browser Object Model)

Window、Navigator、Screen、History、Location

2)DOM对象(Document Object Model)

Document、Anchor、Area、Base、Body、Button、Canvas、Event、Frame、Frameset、IFrame、Image、Link、Meta、Style、Form、Input Button、Input CheckBox、Input File、Input Hidden、Input Password、Input Radio、Input Reset、Input Submit、Input Text、Option、Select、Textare、Table、TableCell、TableRow

3. 自定对象

开发人员自己定义的对象。自定义对象的方法如下:

(1)对象字面量方式(通过JSON来创建对象)
var obj1 = {
    }var obj2 = {
    x:0,y:0}var obj3 = {
    name:‘Mary’,age:18}

缺点:使用同一个接口创建很多对象,会产生大量的重复代码。

(2)工厂模式。
function createPerson(name,age,actor){
    
 var person = new Object();
 person.name = "rose";
 person.age = 18;
 person.job = "actor";
 person.sayName = function () {
    
  console.log(this.name);
 };
 return person
}
console.log(p1 instanceof Object);//true
console.log(p1 instanceof createPerson);//false

①工厂模式就是将创建对象的语句放在一个函数里,通过传入参数来创建特定对象,最后返回创建的对象。

函数createPerson()能够根据接受到的参数来构建一个包含所有必要信息的Person对象。

可以无数次的调用这个函数,而每次它都会返回一个包含2个属性和一个方法的对象。

②缺点:工厂模式虽然可以创建多个相似的对象,但却不能解决对象标识的问题,即怎样知道一个对象的类型。

(3)创建一个 Object 实例
var person = new Object();
person.name = "rose";
person.age = 18;
person.job = "actor";
person.sayName = function () {
    
 console.log(this.name);
};
console.log(person); 
(4)构造函数模式
var obj1 = new Arrayvar obj2 = new Date();

①缺点:使用构造函数的主要问题是:每个方法都要在每个实例上创建一遍。

②在ECMAScript中,函数即对象,因此每定义一个函数,也就是实例化了一个对象。

③也就是说通过构造函数实例化的多个对象的方法,是多个不同的方法,但它们内部的代码以及实现的功能是相同的,这就造成了一定的资源浪费。

(5)原型模式
function Student() {
    }
Person.prototype.name = "rose";
Person.prototype.age = 18;
Person.prototype.sayName = function () {
    
 console.log(this.name);
};
var p = new Student();
console.log(p);

①js中,每个函数都有一个prototype属性,它是一个指针,指向一个对象,叫做原型对象。
在这里插入图片描述

②使用原型模式可以让所有的实例共享原型对象中的属性和方法,也就是说,不必再构造函数中定义对象实例的信息。

③缺点:省略了为构造函数传递初始化参数这一环节,结果所有实例在默认情况下都将取得相同的属性值。

原型模式的最大问题是由共享的本性所导致的。原型中所有属性是被很多实例共享的
这种共享对于函数非常合适。对于包含引用类型的属性来说,问题就比较突出了。因此,很少单独使用原型模式。

(6)组合使用构造函数模式和原型模式
function Person(name, age) {
    
 this.name = name;
 this.age = age;
}
Person.prototype.sayName = function () {
    
 console.log(this.name);
};
var p = new Person("rose", 18);
console.log(p);

①组合使用构造函数模式和原型模式,是创建自定义类型的最常见方式。对象在引用其属性的时候,会按照原型链去查找,直到查找到Object的原型。

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

③结果,每个实例都会有自己的一份实例属性的副本,但同时又共享着对方法的引用,最大限度的节省了内存。
在这里插入图片描述

(7)其他模式

①动态原型模式:仅在第一次调用构造函数时,将方法赋给原型对象的相应属性,其他示例的处理方式同构造函数模式

②寄生构造函数模式:仅仅封装创建对象的代码,然后再返回新创建的对象,仍使用new操作符调用

③稳妥构造函数模式:没有公共属性,只有私有变量和方法,以及一些get/set方法,用以处理私有变量。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Maybe_ss/article/details/125055493

智能推荐

Python Matplotlib画图-程序员宅基地

文章浏览阅读101次。本次学习内容主要涉及利用一些方法如concat方法进行数据合并以及利用groupby进行分组统计,关于concat等合并方法在《利用Python进行数据分析(第二版)》中已做详细说明,其中的学习注释便不再搬运到此处,至于groupby函数的基本使用,与SQL语句中的groupby类似,不再赘述。本次博文仅贴写一些代码。## 导入基本库import pandas as pdimport numpy as np## 数据加载text = pd.read_csv("data/train-left-

物联卡的套餐类型有哪些_物联卡套餐-程序员宅基地

文章浏览阅读2.1k次。物联网的出现逐渐改变和影响着大家生活的各个方面,物联网是以互联网为基础为智能设备提供通信支撑。在万物互联的大背景下,物质因连接而被赋予生命,但是还有小部分企业对物联网的认识存在简单的概念上。  一、物联卡的应用场景和流量划分  物联卡的应用场景可以划分为三类,分别是小流量应用场景、中流量应用场景、大流量应用场景。  ①小流量应用场景是指单用户量小于10MB,应用场景特征指文本类信息传输、单次使用流量小或每月连接次数少,一次性预付较长费用。适用行业主要有智能抄表、金融POS机、消费电子设备等,  ②_物联卡套餐

PCIe热插拔:通知试热插拔&暴力热插拔_pcie dpc presence detect-程序员宅基地

文章浏览阅读5.9k次,点赞11次,收藏52次。某些特殊的应用场合可能要求PCIe设备能够以高可靠性持续不间断运行,为此,PCIe总线采用热插拔(Hot Plug)和热切换(Hot Swap)技术,来实现不关闭系统电源的情况下更换PCIe卡设备。热切换和热插拔的主要区别是应用领域不同,热插拔主要应用于PC以及服务器的主板上的板卡连接,而热切换主要针对的是CPCI(CompactPCI ,一种常用于仪器仪表的接口)应用的。热插拔分为两种,一是通知式热插拔,一个是暴力热插拔,_pcie dpc presence detect

自动化部署脚本_自动部署cmd脚本-程序员宅基地

文章浏览阅读385次。#!/usr/bin/env python # -*- coding: utf-8 -*- import sys, os import subprocess import re import shlex import time filename = sys.argv[0] ABSDIR = os.path.abspath(os.path.dirnam_自动部署cmd脚本

CP-ABE的使用_基于随机森林的cpabe-程序员宅基地

文章浏览阅读9.2k次,点赞8次,收藏36次。参考:http://acsc.cs.utexas.edu/cpabe/tutorial.htmlhttp://acsc.cs.utexas.edu/cpabe/事先先配置好cp-abe:http://www.cnblogs.com/rockorange/p/3757805.html我在ubuntu的主文件夹下面的hmj文件夹下新建了一个文件cp-abe。路径是:/home/_基于随机森林的cpabe

chapter3-有限状态自动机_实现自动机的代码, 并以羊的语言(/baa+!/)为例对其进行测试-程序员宅基地

文章浏览阅读1.5k次。chapter3:finite-state automation. 原书中第三版中的这一章还没写完,所以是看的图书馆借来的第二版,并结合宗成庆老师的统计自然语言处理来看的。 有限状态自动机 finite-state automation, FSA前面一章节中的正则表达式只是一种用于文本搜索的方便的元语言,它是描述有限状态机的一种方法。任何正则表达式又可以用有限状态机来实现(除..._实现自动机的代码, 并以羊的语言(/baa+!/)为例对其进行测试

随便推点

原生js实现移动站点头部搜索栏背景色透明度变化,倒计时,轮播图_js标题滚动实现背景图片由透明变实色怎么弄-程序员宅基地

文章浏览阅读1k次。window.onload = function() { searchRgba(); secondKill(); bannerAutoPlay();} //封装首页头部搜索栏在页面向下滚动时,背景颜色从透明,慢慢变深的效果,在超过轮播图时,背景透明度为0.85不变。 function searchRgba() { var topSearch = docu..._js标题滚动实现背景图片由透明变实色怎么弄

Cesium 自定义Primitive - 绘制多边形_cesium 画空间多边形-程序员宅基地

文章浏览阅读689次,点赞10次,收藏9次。利用Cesium自定义Primitive渲染多边形,并实现实时绘制多边形_cesium 画空间多边形

再说MySQL数据库事务隔离级别的那些事(通俗版非学院派)_通俗的讲一下mysql的隔离级别-程序员宅基地

文章浏览阅读517次。MySQL数据库事务隔离级别有四种:READ-UNCOMMITTED(读未提交)、READ-COMMITTED(读提交)、REPEATABLE-READ(重复读)、SERIERLIZED(序列化读)。要真正理解数据库事务隔离级不能光看书,必须要上机操作,多练几次就会明白的了。上机环境有几点大家要注意的:1,把事务的自动提交功能关掉;2,把表引擎设置为InnoDB(支持事务操作);3,在做实验的_通俗的讲一下mysql的隔离级别

16位汇编 loop循环_16位汇编 循环-程序员宅基地

文章浏览阅读1.4k次。loop循环,计算2的8次方assume cs:codesgcodesg segment mov ax,2 mov cx,7 s: add ax,ax loop s mov ax,4c00h int 21Hcodesg endsend_16位汇编 循环

python界面设计工具-wxFormBuilder_vscode wxformbuilder-程序员宅基地

文章浏览阅读7.8k次,点赞7次,收藏69次。一 wxFormBuilder是什么wxFormBuilder是一款可视化的GUI设计工具,界面设计后可以自动生成代码,免去了手工码gui的繁琐,一套界面可支持生成C++\Python\PHP\Lua\XRC等代码形式,可以极大提升python GUI开发效能。项目发布网址:https://github.com/wxFormBuilder/wxFormBuilder/releases..._vscode wxformbuilder

Ubuntu 彻底删除 MYSQL 然后重装 MYSQL_sudo apt-get remove mysql-common-程序员宅基地

文章浏览阅读268次。删除 mysqlsudo apt-get autoremove --purge mysql-server-5.0sudo apt-get remove mysql-serversudo apt-get autoremove mysql-serversudo apt-get remove mysql-common //这个很重要上面的其实有一些是多余的。清理残_sudo apt-get remove mysql-common

推荐文章

热门文章

相关标签