JavaScript有许多内置对象,如Number(数字)、Array(数组)、String(字符串)、Date(日期)和Math(数学)。这些内置对象都有成员属性和方法。除了JavaScript对象,Node.js、MongoDB、Express和Angular也添加了自己的内置对象。

  JavaScript也为你构建自己的自定义对象提供了一个相当不错的面向对象的编辑结构。使用对象而不只是一个函数集合,是编写清洁、高效、可重复使用的JavaScript代码的关键。

  1、使用对象语法

  为了有效的在JavaScript中使用对象,你需要对其结构和语法有所理解。一个对象实际上只是一个容器,他将多个值(并且在某些情况下,将多个函数)组合在一起。对象的值被称为属性,而对象的函数被称为方法。

  要使用一个JavaScript对象,必须先创建该对象的实例。你可以通过使用关键字new和对象的构造函数名称创建对象实例。例如,要创建一个Number对象,可以使用下面的代码行:

  var x = new Number("5");

  对象的语法很简单:使用对象名称,然后是一个点,然后是属性或方法的名称。例如,下面的代码行获取和设置名为myObj的对象的name属性:

  var s = myObj.name;

  myObj.name = "New Name";

  你也可以用相同的方法获取和设置对象的对象方法。例如,下面的代码行调用getName()方法,然后更改名为myObj的对象的方法函数:

  var name = myObj.getName();

  myObj.getName() = function(){return this.name;};

  你还可以创建对象,并直接使用{}语法对变量和函数赋值。例如,下面的代码定义了一个新的对象,并赋予他值和一个方法函数:

  var obj = {

    name:"My Object",

    value:7,

    getValue:function(){return this.name;};

  };

  你还可以通过使用object[propertyName](对象[属性名])的语法来访问JavaScript对象的成员。当你使用动态属性名称并且当属性名必须包含JavaScript不支持的字符时,这非常有效。例如,下面的例子获取对象名myObj中的"User Name"和"Other Name"属性:

  var propName = "User Name";

  var val1 = myObj[propName];

  var val2 = myObj["Other Name"];

  2、创建自定义对象

  使用内置的JavaScript对象有几个优点。当你开始编写使用越来越多的数据的代码时,就会发现自己想要建立具有特定的属性和方法的自定义对象。

  你可以用几个不同的方法来定义JavaScript对象。最简单的是即时方法:只需创建一个通用的对象,然后根据需要添加其属性。例如,要创建一个用户对象,并赋给它一个名字和姓氏,以及定义一个函数来返回它们,你可以使用下面的代码:

  var user = new Object();

  user.first="Brad";

  user.last="Dayley";

  user.getName = function(){

    return this.first+""+this.last;

  }

  你也可以使用下面的代码实现与直接赋值相同的效果,其中,对象被包含在{}中,而属性是使用property:value(属性:值)的语法定义的:

  var user = {

    first:'Brad',

    last:'Dayley',

    getName:function(){

      return this.first+""+this.last;

    }

  };

  对于你以后并不需要再使用的简单对象,前两个选项工作的非常好。对于可重用的对象,更好的方法是将对象实际封装在其自身的函数块里面。这具有允许你将所有关于对象的代码局部保持在对象本身中的优点。例如:

  function User(first,last){

    this.first = first;

    this.last = last;

    this.getName = function(){return this.first +""+ this.last;};

  }

  var user = new User("Brad","Daylet");

  如果你有一个对象可以使用点符号表示法引用的属性,这些方法的最终结果是基本相同的,如下所示:

  console.log(user.getName());

  3、使用原型对象模式

  创建对象的更先进的方法是使用原型模式。通过不在对象本身里面,而在对象的原型属性里面定义函数来实现一个模式。有了原型,在原型汇总定义的函数只在JavaScript加载时被创建一次,而不是每次创建一个新的对象时都被创建。

  下面的例子展示了原型的语法:

  function UserP(first,last){

    this.first = first;

    this.last = last;

  }

  UserP.prototype = {

    getFullName:function(){

      return this.first + "" + this.last;

    }

  };

  请注意,你定义对象UserP,然后将UserP.prototype设置为包括getFullName()函数。你可以在原型中包括任意多的函数。每创建一个新的对象时,这些函数都将可用。

JavaScript基础——使用JavaScript对象的更多相关文章

  1. javaScript基础-01 javascript语法结构

    一.基础 字符集 JavaScript程序是用Unicode字符集编写的. .区分大小写 .空格.换行符和格式控制符 .Unicode转义序列 .标准化 二.类型.值和变量 JavaScript的数据 ...

  2. 2021年3月-第03阶段-前端基础-JavaScript基础语法-JavaScript基础第01天

    1 - 编程语言 1.1 编程 编程: 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序: 就是计算机所执行的一系列的指令集合,而程序全部都是用我们所掌 ...

  3. JavaScript基础20——element对象

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. JavaScript基础10——node对象

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. JavaScript基础知识----document对象

    对象属性document.title                 //设置文档标题等价于HTML的<title>标签document.bgColor               //设 ...

  6. JavaScript基础知识(对象、函数与对象)

    17.对象 属性:描述对象的信息  方法:描述对象的行为  封装:只关心输入和输出(不管过程如何实现) ü 对象的分类: 内置对象(原生对象): 就是JavaScript语言预定义的对象(如Strin ...

  7. JavaScript -基础- 函数与对象

    一.JavaScript三对象 1.分类方式一 1)ECMAScript JavaScript的ECMA规范 JS本身的对象 2)Dom 操作HTML相关 3)BOM游览器对象 游览器窗口对象,全局的 ...

  8. JavaScript -基础- 函数与对象(二)String

    一.判断数据类型typeof与判断对象类型instanceof 1.typeof typeof只能判断基础数据类型,无法判断引用数据类型 <script> var s="hell ...

  9. JavaScript基础之原型对象和原型链

    原型对象 原型对象简单来说就是函数的原型所指向的对象.前面说原型的时候,说了Object.prototype所指对象就是Object(函数)的原型对象.在每个函数的原型对象中,默认会有construc ...

随机推荐

  1. DOM之操作技术

    1.1 动态脚本 动态加载的外部JS文件能够立即运行.难点在于如何知道脚本加载完成了?可以通过事件来检测.IE对待<script>元素特殊性,不允许DOM访问其子节点.使用元素的text属 ...

  2. HDU 1058 Humble Numbers(离线打表)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1058 解题报告:输入一个n,输出第n个质因子只有2,3,5,7的数. 用了离线打表,因为n最大只有58 ...

  3. NOIP2016题目整合

    今天终于拿到官方数据,兴致勃勃地全 A 了. Day 1 T1 toy 处理一下正负号加加减减取模乱搞就好了. #include <iostream> #include <cstdi ...

  4. 跟着百度学PHP[4]OOP面对对象编程-13-魔术方法__set(),__get(),__isset(),__unset()

    __set() 在对象访问私有成员的时候自动被调用,达到了给你看,但是不能给你修改的效果!(在对象访问一个私有的成员的时候就会自动的调用该魔术方法) __get() 方法用于获取私有属性值.(在设置私 ...

  5. MySQL高可用性之Keepalived+MySQL(双主热备)

    环境描述:OS:CentOS6.5_X64MASTER:192.168.0.202BACKUP:192.168.0.203VIP:192.168.0.204 1.配置两台Mysql主主同步[root@ ...

  6. Appium+Robotframework实现Android应用的自动化测试-7:模拟器频繁挂掉的解决方案

    如果测试用例比较多,则当持续运行多个测试用例后,经常会出现模拟器崩溃或者Appium无法连接到该模拟器的情况出现. 经过分析,本人认为这应该是模拟器或者Appium的缺陷造成的,目前并没有直接的解决方 ...

  7. 21. javacript高级程序设计-Ajax与Comet

    1. Ajax与Comet 1.1 XMLHttpRequest对象 IE5是第一款引入XHR对象的浏览器,IE5中是通过MSXML库中的一个ActiveX对象实现的.因此在IE中可能存在MSXML2 ...

  8. Java中hashCode()方法以及HashMap()中hash()方法

    Java的Object类中有一个hashCode()方法: public final native Class<?> getClass(); public native int hashC ...

  9. C++ STL 的实现:

    C++ STL 的实现: 1.vector  底层数据结构为数组 ,支持快速随机访问 2.list    底层数据结构为双向链表,支持快速增删 3.deque   底层数据结构为一个中央控制器和多个缓 ...

  10. ABAP 供应商、工厂对应公里数维护

    *&---------------------------------------------------------------------* *& Report  ZMMR011 ...