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

相关文章
|
5天前
|
XML JavaScript 前端开发
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
7 2
|
6天前
|
Web App开发 JavaScript 前端开发
JavaScript 中的 Range 和 Selection 对象
JavaScript 中的 `Range` 和 `Selection` 对象用于处理文本选择。`Range` 表示文档中选定的区域,而 `Selection` 表示用户选择的文本或光标位置。`Range` 可以创建并设置于任何元素或文本,具有多个属性(如 `startContainer`, `endContainer`, `collapsed`)和方法(如 `cloneContents`, `deleteContents`)。`Selection` 提供了获取和操作用户选择的方法,如 `anchorNode`, `focusNode` 和 `addRange`。两者在所有现代浏览器中基本兼容。
5 1
JavaScript 中的 Range 和 Selection 对象
|
8天前
|
JSON JavaScript 安全
向js发送含有NSDictionary对象或NSArray对象的消息
向js发送含有NSDictionary对象或NSArray对象的消息
19 0
|
9天前
|
前端开发 JavaScript
前端 JS 经典:判断对象属性是否存在
前端 JS 经典:判断对象属性是否存在
15 0
|
12天前
|
JSON 前端开发 JavaScript
前端 JS 经典:JSON 对象
前端 JS 经典:JSON 对象
17 0
|
12天前
|
前端开发 JavaScript
前端 js 经典:原型对象和原型链
前端 js 经典:原型对象和原型链
23 1
|
13天前
|
JavaScript 前端开发 流计算
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
|
13天前
|
JSON JavaScript 前端开发
js将json字符串还原为json对象
【5月更文挑战第14天】js将json字符串还原为json对象
44 1
|
13天前
|
设计模式 存储 消息中间件
JavaScript观察者模式:实现对象间的事件通信!
JavaScript观察者模式:实现对象间的事件通信!
|
13天前
|
设计模式 JavaScript 前端开发
JavaScript原型模式:实现对象共享属性和方法!
JavaScript原型模式:实现对象共享属性和方法!