0


js创建对象

一、什么是对象?

   对象是一组无序的相关属性和方法的集合,也就是存储数据的集合。

   对象是由属性和方法组成的。

二、定义对象的三种方式

2.1 字面量定义对象

  • 对象里面的数据单元 采用 键名:键值 或 属性:属性值 的语法形式存储
  • 多个数据单元中间用逗号隔开
//name就是obj对象的键名/属性,'王昭没有君啊'是值、属性值
//fn是一个方法,冒号后面是一个匿名函数
var obj = {name:'王昭没有君啊',sex:'男',age:'**',
           fn:function(){
               console.log('正在努力写博客');
           }

};

调用对象的属性的方法:

(1)对象.属性

      不支持数字键名,不支持解析变量

(2)对象['属性']

      支持数字键名,支持解析变量

调用对象的方法

** **对象.方法名()

var obj = {name:'王昭没有君啊',sex:'男',age:'**',
           fn:function(){
               console.log('正在努力写博客');
           }

};

console.log(obj);
console.log(obj.name);
console.log(obj['name']);

obj.fn();

执行结果:

变量、属性,函数、方法的区别:

** **相同点:变量、属性,他们都是用来存储数据的

不同点:

   变量:单独声明并赋值 使用的时候直接写变量名 单独存在

   属性:在对象里面不需要声明 使用的时候必须是 对象.属性 或 对象['属性']

不同点:函数、方法,都是实现某种功能的

   函数:单独声明 调用的 函数名()是单独存在的

   方法:是在对象里面的 调用方式: 对象.方法();

              用来描述对象的行为和功能

2.2 new Object定义对象

  • 利用 = 赋值 添加对象的属性和方法
  • 每个属性、方法之间用分号结束
var obj = new Object();

obj.name = '王昭没有君啊';
obj.sex = '男';
obj.age = '**';
obj.fn = function() {
    console.log('正在努力写博客');
} 

console.log(obj.name);
console.log(obj['sex']);
obj.fn();

console.log(obj);

执行结果:

2.3 构造函数定义对象

构造函数的语法格式

function 构造函数名() {

** this.属性 = 属性值;**

** this.方法 = function() {}**

}

注意:

 前面两种方法定义对象一次只能定义一个对象,如果对象里面的很多 属性和方法 和另一个对象大部分是相同的,一般我们只能进行复制粘贴到另一个对象里,这样写是可以的,但是就显得略微粗糙,怎么办呢,那么我们就可以利用 函数的方法 去重复这些相同的代码,这个函数就称为 **构造函数**,这个函数封装的不是普通的代码,而是封装的对象,它呢,其实就是把对象里面的一些 相同的 属性和方法 抽象 出来 封装到函数里面。

通过new关键字创建对象的过程 就是 对象实例化

function Person(name,num,sex) { //构造函数名首字母需要大写

   this.name = name;
   this.age = num;
   this.sex = sex;

   this.fn = function (grade) {
      console.log(grade);
   }
}

//调用构造函数不需要return 就可以返回结果
//调用构造函数 必须使用 new
//使用 new Person()调用函数 就可以定义一个对象
var protagonist = new Person('叶天帝', 24, '男');
    
console.log(protagonist.name);
console.log(protagonist.age);
console.log(protagonist.sex);
protagonist.fn('红尘仙');

var fristProtagonist = new Person('荒天帝', 30, '男');

console.log(fristProtagonist.name);
console.log(fristProtagonist.age);
console.log(fristProtagonist.sex);
protagonist.fn('红尘仙');

执行结果:

构造函数和对象的区别:

构造函数:泛指的某一大类

对象:特指某一个具体的事物

三、对象的基本操作

定义一个对象:

var obj = {name:'王昭没有君啊',sex:'男',age:'**',
           fn:function(){
               console.log('正在努力写博客');
           }

};

执行结果:

然后分别进行以下操作 :

**修改对象 **

对象是已经存在的

//修改
obj.name = '王昭君';
obj.sex = '女';

执行结果:

新增对象

  对象是不存在的
//新增
obj.addr = '北京';
console.log(obj);

执行结果:

删除对象

格式一:

 delete( 对象.属性 )

 delete( 对象['属性'] )

格式二:

  delete 对象.属性

  delete 对象['属性']

  对象是已经存在的
//删除
delete(obj.sex);
delete(obj['age']);

执行结果:

四、循环遍历对象

对象只能用 for...in 循环遍历

注:for...in 循环在我的另一篇文章 JavaScript数组相关知识 有详解

var obj = {name:'王昭没有君啊',sex:'男',age:'**'};

//循环遍历对象
for (var index in obj) {

    //index 存储的是obj对象的键名
    console.log(index);

    //对象.属性不能解析变量
    //这里必须使用 对象['属性'] 的方式,可以解析变量
    console.log(obj[index]);
}

执行结果:


本文转载自: https://blog.csdn.net/weixin_58448088/article/details/122373119
版权归原作者 王昭没有君啊 所有, 如有侵权,请联系我们删除。

“js创建对象”的评论:

还没有评论