Js基础之对象

作者: PengL | 来源:发表于2016-08-29 11:33 被阅读89次

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基础之DOM中元素对象的属性方法

    js基础之DOM中元素对象的属性方法

  • Js基础之对象

    JS中一切皆为对象,这是一句常说的话。了解JS对象,从这句话开始吧。JS中的基本数据类型如number,bool,...

  • js基础之对象

    修改对象 先介绍下:Object.defineProperty(对象, 属性, 描述符) 数据描述符: value...

  • JS基础

    JS基础 JS运算 JS代码块 JS对象 原型对象 GC 正则表达式

  • 发现•分享—2019-01-17

    文章 JS JS 异步编程六种方案 JS基础—原型对象的那些事(一) JS基础—原型对象的那些事(二) CSS 综...

  • Android 程序员搞 web 之 js基础(十)

    Android 程序员搞 js 之 基础(九) 一、arguments 对象伪数组 这个伪对象可以替换 函数传入的...

  • js对象及其方法

    1.对象MDN文档2.JS基础--JS对象及其基本用法3.JavaScript 对象所有API解析

  • html基础 持续更新

    html js 基础 js 常见获取dom对象的方法 getElementById() getElementByN...

  • Dom

    JS的组成 ECMAScript js的基础语法 DOM 文档对象模型 BOM ...

  • DOM

    JS的组成 ECMAScript js的基础语法 DOM 文档对象模型 BOM ...

网友评论

    本文标题:Js基础之对象

    本文链接:https://www.haomeiwen.com/subject/abpxettx.html