JavaScript对象

简介: JavaScript对象

一,什么是对象?为什么需要对象

在这里插入图片描述
为什么需要对象

二,创建对象的三种方式

在这里插入图片描述

1.利用字面量创建对象

在这里插入图片描述
在这里插入图片描述

var obj = {} //创建了一个空的对象

var obj = {
    uname: '张三', //属性
    age: 18, //属性  多个属性或方法之间用逗号隔开
    sayHi: function() { //方法   方法冒号后跟的是一个匿名函数
        console.log('hi~');
    }

}

//使用对象:对象名.属性或对象名['属性名']     对象名.方法()
console.log(obj.age); //18
console.log(obj['uname']); //张三
obj.sayHi(); //hi~

变量,属性,函数,方法总结
在这里插入图片描述

2.利用new Object创建对象

var obj = new Object(); //创建了一个空对象
//追加对象和方法 利用赋值的方法,每个属性和方法之间分号分隔
obj.uname = '张三';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function() {
    console.log('hi~');
}

3.利用构造函数创建对象

在这里插入图片描述

因为一次创建一个对象,里面有很多属性和方法相同,我们只能复制,因此我们可以利用函数的方法重复这些相同的代码,而这个函数就叫做构造函数

构造函数里面封装的不是普通代码,而是对象

语法格式:

//构造函数的语法格式
//属性和方法前面必须要加this
//构造函数不需要return就可以返回结果
function 构造函数名(形参,形参,...){   //构造函数名首字母要大写
    this.属性 = 值;
    this.方法 = function (){
        语句
    }
}
//调用构造函数  必须要用new
new 构造函数名(实参,实参,...);

注意:构造函数名首字母一般要大写

实例:

function Star(uname, age, sex) {
    this.uname = uname;
    this.age = age;
    this.sex = sex;
    this.sing = function(sang) {
        console.log(sang);
    }
}

var zs = new Star('张三', 18, '男'); //调用构造函数返回的是一个对象
console.log(typeof zs); //判断数据类型 结果为object即对象

//调用属性和方法
console.log(zs.age); //18
console.log(zs['sex']); //男 

zs.sing('我是罪人'); //我是罪人

构造函数与对象
在这里插入图片描述

三,new关键字

在这里插入图片描述

四,遍历对象

for..in语句用于对数组或者对象的属性进行循环操作

//格式 
for (变量 in 对象) {
    循环体;
}
var obj = {
    uname: '张三',
    age: 18,
    sex: '男',
    sing: function() {
        console.log('sang');
    }
}


for (var k in obj) {   //k不赋值
    console.log(k); //k 变量 输出得到的是属性名或方法名
    console.log(obj[k]); //输出属性值和方法
}

使用 for in 时里面的变量常用 k 或 key

相关文章
|
4天前
|
JSON JavaScript 前端开发
JavaScript实现字符串转json对象的方法
JavaScript实现字符串转json对象的方法
|
7天前
|
JavaScript 前端开发
js之DOM 文档对象模型
js之DOM 文档对象模型
8 1
js之DOM 文档对象模型
|
1天前
|
JSON JavaScript 前端开发
如何检查 JavaScript 对象是否为空
【8月更文挑战第18天】
12 0
如何检查 JavaScript 对象是否为空
|
4天前
|
JavaScript 前端开发
JavaScript BOM 的概念(浏览器对象模型)
JavaScript BOM 的概念(浏览器对象模型)
12 1
|
4天前
|
JavaScript 前端开发
JavaScript基础&实战(5)js中的数组、forEach遍历、Date对象、Math、String对象
这篇文章介绍了JavaScript中的数组、Date对象、Math对象以及包装类(String、Number、Boolean),并详细讲解了数组的创建、方法(如forEach、push、pop、unshift、slice、splice)和遍历操作,以及工厂方法创建对象和原型对象的概念。
JavaScript基础&实战(5)js中的数组、forEach遍历、Date对象、Math、String对象
|
4天前
|
JavaScript 前端开发
JavaScript基础&实战(4)js中的对象、函数、全局作用域和局部作用域
这篇文章介绍了JavaScript中对象的基本概念和操作,包括对象属性和方法的使用、对象字面量的创建、函数的定义和作用域的概念,以及全局作用域和局部作用域的区别和特性。
JavaScript基础&实战(4)js中的对象、函数、全局作用域和局部作用域
|
11天前
|
JavaScript 数据处理
如何使用 Vue.js 将数据对象的值放入另一个数据对象中?
如何使用 Vue.js 将数据对象的值放入另一个数据对象中?
|
17天前
|
JavaScript 前端开发 Java
什么是JavaScript原型对象
【8月更文挑战第2天】什么是JavaScript原型对象
39 9
|
4天前
|
JavaScript 前端开发
js之DOM 文档对象模型
js之DOM 文档对象模型
|
4天前
|
JavaScript 前端开发
JS遍历数组和对象的方法有哪些
JS遍历数组和对象的方法有哪些

热门文章

最新文章