美文网首页
JavaScript对象基础

JavaScript对象基础

作者: Summerdise | 来源:发表于2019-12-17 16:14 被阅读0次

现实世界是由无数的事物或对象组成,事物都有各独特的属性和一些动作行为,一般我们可以通过事物的某些特征或行为动作描述它。JavaScript中也是如此,JavaScript对象是多个键值对的集合,键我们称之为对象的属性,值称之为属性值。如果某个属性的值是函数,那么我们称这个属性是该对象的一个方法。

一、JavaScript对象分类

JS中对象大致可以分为3大类

1.本地对象

这类对象是独立于宿主环境的对象,不因宿主环境的改变而有任何不同。

名称 内容
Object 称他为原始对象,JS中其他的本地对象都继承自他,他的所有方法和属性都会出现在其他对象中。
Function 函数其实是功能完整的对象,他也有自己的属性和方法,我们使用function关键字定义的所有函数都属于该类。
Array 数组对象比较特别,因为它的键是从0开始的数字。并且是用中括号“[]”包裹的。
String 文本对象
Boolean 布尔对象
Number 数字对象
Date 时间对象
RegExp 正则表达式对象

2.内置对象

内置对象也是独立于宿主环境的,但它只有在程序被执行之前才出现。

名称 内容
Global 全局对象是预定义的对象,作为JavaScript的全局函数和全局变量的占位符,全局对象只是一个对象,而不是一个类,既没有构造函数也无法被实例化
Math Math对象和Global一样,没有构造函数,也不能使用new实例化。它是专门用于执行数学计算的数学函数和数学常量的集合

3.宿主对象

所有由宿主实现的对象都属于该类,JavaScript中的宿主对象是Web对象,所有DOM和BOM对象都是宿主对象。
由宿主提供的对象,在浏览器中window对象以及其下边所有的子对象(如bom、dom等等),在node中是globla及其子对象,也包含自定义的类对象。

二、JavaScript对象的创建

1.对象字面量方式

对象字面量方式是创建自定义对象的首选模式,简单方便。
缺点:使用同一个接口创建很多对象,会产生大量的重复代码。比如我想再创建一个person1对象,我就得把上面的代码再重新写一遍,改变不同的属性值。

var person = {
   name: '小白开发',
   job: 'html',
   getName: function () {
        alert(this.name);
   }
}

2.工厂模式

通俗地讲,工厂模式就是将创建对象的语句放在一个函数里,通过传入参数来创建特定对象,最后返回创建的对象。函数createPerson()能够根据接受到的参数来构建一个包含所有必要信息的Person对象。可以无数次的调用这个函数,而每次它都会返回一个包含2个属性和一个方法的对象。
缺点:工厂模式虽然可以创建多个相似的对象,但却不能解决对象标识的问题,即怎样知道一个对象的类型。构造函数模式应运而生。

function createPerson(name, job) {
   var obj = new Object();
   obj.name = name;
   obj.job = job;
   obj.getName = function () {
       alert(this.name);
   }
   return obj;
}
var p1 = createPerson('小白开发1', 'html1');
var p2 = createPerson('小白开发2', 'html2');

3.构造函数模式

构造模式创建对象有以下几点不同:没有显示地创建对象;直接将属性和方法赋给this对象;没有return语句。
此外,还应注意到要创建Person的实例,必须要使用new操作符,创建的实例对象将有一个constructor(构造器)属性,指向Person构造函数。调用构造函数创建对象经过了以下几个过程:
1.创建一个新对象
2.将构造函数的作用域赋给新对象(因此this就指向了这个新对象)
3.执行构造函数中的代码
4.返回新对象(不需要显式返回)
构造函数虽好用,但也不是没有缺点。使用构造函数的主要问题是:每个方法都要在每个实例上创建一遍。在ECMAScript中,函数即对象,因此每定义一个函数,也就是实例化了一个对象。

function Person(name, job) {
  this.name = name;
  this.job = job;
  this.getName = function () {
       alert(this.name);
  }
}
var p1 = new Person('小白开发1', 'java');
var p2 = new Person('小白开发2', 'php');

4.原型模式

function Person(){  }
Person.prototype.name = 'Claiyre';
Person.prototype.sex = 'female';
Person.prototype.class = 5;
Person.prototype.getName = function (){
      console.log(this.name);
}
var p5 = new Person();  
p5.getName();    //Claiyre
var p6 = new Person();
p6.getName();    //Claiyre

三、对象方法

1.属性访问方式

  • 点操作符访问对象属性(.)
  • 中括号操作符访问对象属性([])
  • 中括号操作符:用变量来访问一个属性。
var person = {
    name: '小白开发',
    job: 'html',
    getName: function () {
         alert(this.name);
    }
}
var result = person.name;
var result2 = person[job];

2.更新对象的属性:

  • 点操作符或中括号操作符指定后直接更新
person.name='大神开发';
person[job]='全栈';

3.给对象添加属性:

  • 点操作符或中括号操作符定后直接添加
person.teacher = 'YY';
person[teacher2] = '欢欢';

4.删除对象的属性:

delete person.teacher;
delete person[teacher2];

5.检查一个对象属性是否存在

person.hasOwnProperty(names);//true
person.hasOwnProperty(teacher);//false

相关文章

网友评论

      本文标题:JavaScript对象基础

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