JS中一切皆为对象,这是一句常说的话。了解JS对象,从这句话开始吧。JS中的基本数据类型如number,bool,字符串,数组,null,undefined等等都是对象。

对象的本质:

带有属性和方法的特殊数据类型,而每个属性或者方法又可看做是一个键值对,因此可以这样定义:对象是一系列无序键值对的集合

在JS中对象分为两种:

  • JS的内建对象,如:string,Date,Array等
  • 你自己创建的对象

JS中如何创建自己的对象:

1 对象初始化器,这种方式最为简单暴力,直接一系列明显的键值对集合。

    var obj={
name:'PengL',
age:100,
func:function()
{
alert("I am "+obj.name+" and I am "+obj.age);
}
};

2 构造函数

    function person(name,age){
this.name=name;
this.age=age;
this.func=func;
function func()
{
alert("I am "+this.name+" and I am "+this.age);
}
}
var obj=new person("PengL",100);

说明:第一种方法是直接创建的一个对象的实例,第二种是通过new构造函数的方式来创建一个对象,并且传入不同的参数,这样对象对应的属性值就不一样。不过要注意的是不要忘了new,不然就是把一个普通函数赋给了obj,并且这时的this指向也是混乱的了。关于this指向的问题可以参考一下作者的另一篇博客javascript进阶之this

对于构造函数创建对象的方法我还想再进一步介绍一下

一般在真实的项目中上面demo的写法其实是不合理的。最好的方式是原型和构造函数混用的方式来做,比如上面的可以改成这样

    function person(name,age)
{
this.name=name;
this.age=age;
}
person.prototype.func=function(){
alert("I am "+this.name+" and I am "+this.age);
};

这种方式不仅结构清楚,最重要的是还节约了内存,在对象的原型上创建的方法,那么这个方法就是通过该构造函数所创建的所有对象共有的方法了。各个对象有自己独有的name,age属性,有共有的func方法。如果有对原型不熟悉的同学可以看看这篇廖雪峰大神的作品廖雪峰


最后再做一下总结吧,加深一下印象

  • JS中一切皆对象
  • 对象本质是一系列无序键值对的集合
  • 创建对象有两种常见的方法,初始化器和构造函数(不同情况来进行选择,并非总是第二种最好)

JS基础之对象的更多相关文章

  1. JS基础学习——对象

    JS基础学习--对象 什么是对象 对象object是JS的一种基本数据类型,除此之外还包括的基本数据类型有string.number.boolean.null.undefined.与其他数据类型不同的 ...

  2. JS基础语法---对象总结

        * 编程思想:     * 面向过程:凡事亲力亲为,所有的事情的过程都要清楚,注重的是过程     * 面向对象:提出需求,找到对象,对象解决这个问题,我们要结果,注重的是结果     *   ...

  3. JS基础_对象的简介、对象的基本操作

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

  4. 【JS基础】对象

    delete 可以删除对象属性及变量 function fun(){ this.name = 'mm'; } var obj = new fun(); console.log(obj.name);// ...

  5. js基础-单体对象日期对象

    Math对象 全局对象 日期对象 var t = new Date() t.toLocaleDateString(); t.getFullYear(); t.getMonth() + 1 t.getD ...

  6. 2-4 js基础-事件对象小结

    var e=ev||event; e.cancelBubble=true; document.documentElement   html document.body                  ...

  7. JS基础_对象的方法

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

  8. JS基础_对象字面量

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

  9. JS基础_对象操作

    1.in 运算符 通过该运算符可以检查一个对象中是否含有指定的属性,如果有,返回true 语法: “属性名” in 对象 var obj = { name:"hello" } co ...

随机推荐

  1. 一小时学会C# 6

    c# 6已经出来有一段时间了,今天我们就详细地看一下这些新的特性. 一.字符串插值 (String Interpolation) C# 6之前我们拼接字符串时需要这样 var Name = " ...

  2. 学习scala03 控制结构

    scala拥有非常宽松的控制结构. if与while scala中的if和while几乎和java中的结构一模一样. //if语句 val a= ){ println(“”) }else{ print ...

  3. JSP模板继承功能实现

    背景 最近刚入职新公司,浏览一下新公司项目,发现项目中大多数JSP页面都是独立的.完整的页面,因此许多页面都会有如下重复的代码: <%@ page language="java&quo ...

  4. C# Azure 存储-分布式缓存Redis工具类 RedisHelper

    using System; using System.Collections.Generic; using Newtonsoft.Json; using StackExchange.Redis; na ...

  5. Objective-C 观察者模式--简单介绍和使用

    观察者模式(有时又被称为发布-订阅模式) 在此种模式中,一个目标物件管理所有相依于它的观察者物件,并且在它本身的状态改变时主动发出通知. 这通常透过呼叫各观察者所提供的方法来实现.此种模式通常被用来实 ...

  6. SVN代码冲突解决方案小集合

    对于刚接触svn的人来说,svn冲突后,不能提交是件让人很郁闷的事情.最让人郁闷的事,是代码间的覆盖.你把我代码盖了,我会很火大的.谁把谁的盖了都不爽. 为什么会出现代码冲突问题呢,因为不同的人,同时 ...

  7. SQL Server 2014新功能PPT

        本篇文章是我在公司内部分享SQL Server 2014新功能的PPT,在本PPT中我详细描述了SQL Server除了BI方面的新功能,以及提供了大量的测试.希望对大家有帮助.     请点 ...

  8. 模拟ajax的 script请求

    /** * 模拟ajax的 script请求 * @param {[type]} options [description] * @return {[type]} [description] */ f ...

  9. Create Volume 操作(Part III) - 每天5分钟玩转 OpenStack(52)

    本节是创建 Volume 的第三部分,也是最后一部分:cinder-volume 的处理过程. 第一部分和第二部分可以参考前面两个小节.cinder-volume 通过 driver 创建 volum ...

  10. 国内版Office 365和Azure AAD绑定的问题及解决方案

      背景: 1. 开发人员要做的事情,是希望在应用程序里面能调用Office 365 的API(Microsoft Graph)来动态添加Office 365账号 2. 如果需要调用这些API,必须在 ...