IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 09.JavaScript-对象 -> 正文阅读

[JavaScript知识库]09.JavaScript-对象

目录

一、什么是对象?

二、对象组成

三、为什么需要对象

四、创建对象的三种方式

1. 字面量 : {}

使用对象

2. new Object

对象的属性使用:

对象的方法使用:

3. 构造函数创建

构造函数语法格式:

new?关键字的执行过程

五、对象的遍历?


一、什么是对象?

对象是一个具体事物。比如这个手机、这根铅笔就是对象。

在js中:对象是一组无序的相关属性方法的集合,所有事物都是对象,比如字符串、数组、数值、函数等;

二、对象组成

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

属性:事物的特征,在对象中用属性来表示(名词)

方法:事物的行为,在对象中用方法来表示(动词)

三、为什么需要对象

因为js中对象表达结构更清晰,强大

四、创建对象的三种方式

1. 字面量 : {}

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

var obj = {

????????name: '刘朋',

????????age: 18,

????????sex: '男',

????????sayHi: function() {

????????????????console.log('hi~');

????????}

}

注意:?

1) 里面的属性或者方法采用键值对的形式来创建

2) 多个属性之间用逗号来分隔

3) 方法冒号后面跟的是匿名函数

使用对象

1) 调用对象的属性:对象名.属性

????????console.log(obj.name);

2) 调用对象的属性:对象名['属性']

????????console.log(obj['age']);

3) 调用对象的方法:对象名.方法名

????????obj.sayHi();

2. new Object

利用new Object 方法创建对象

? ? ? ? var obj = new Object(); //创建了一个空对象

? ? ? ? obj.uname = '张三';

? ? ? ? obj.age = 27;

? ? ? ? obj.sex = '男';

? ? ? ? obj.sayHi = function() {

? ? ? ? ? ? console.log('我会说话');

? ? ? ? }

对象的属性使用:

? ? ? ? console.log(obj.uname);

? ? ? ? console.log(obj['age']);

? ? ? ? console.log(obj.sex);

对象的方法使用:

? ? ? ? obj.sayHi();

注意

1、 每一个属性之间以分号隔开

2、采用的是 等号赋值的方法添加对象的属性和方法

3. 构造函数创建

为什么使用构造函数创建对象:因为前两种每次只能创建一个对象,很多代码都是重复相同的,这时候可以通过函数的封装。

构造函数封装的不是普通代码,而是对象!把对象里面相同的属性和方法抽象出来封装到函数里面。

构造函数语法格式:

function 构造函数名() {

}

new 构造函数名(); // 构造函数的调用

1、创建四大天王的对象。公共属性和方法:姓名,年龄、性别、唱歌

????????function Star(uname, age, sex) {

????????????this.name = uname;

????????????this.age = age;

????????????this.sex = sex;

????????????this.sing = function(song) {

????????????????console.log(song);

????????????}

????????}

????????var ldh = new Star('刘德华', 18, '男'); //调用函数返回的是一个对象

????????console.log(ldh);

????????console.log(ldh.name);

????????console.log(ldh['age']);

????????console.log(ldh['sex']);

????????ldh.sing('冰雨');

????????var zxy = new Star('张学友', 19, '男'); //调用函数返回的是一个对象

????????console.log(zxy);

????????zxy.sing('李香兰');

注意:

1)构造函数的首字母要大写

2)构造函数不需要? return 就可以返回结果

3)调用构造函数必须使用 new 关键字

4)属性和方法前面必须要使用this

new?关键字的执行过程

1、在内存中创建一个空的对象

2、所有的this指向这个空的对象

3、执行构造函数里面的代码,给这个空的对象添加属性和方法

4、返回这个对象(所以构造函数中不需要return返回结果)


五、对象的遍历?

使用? for in ?遍历对象

语法格式:

for (变量 in 对象名) {

}? ??

例如:

var obj = {

????????????name: '刘德华',

????????????age: 18,

????????????sex: '男'

}

for (var k in obj) {

????????????console.log(k); // k是变量,输出的是属性名

????????????console.log(obj[k]); //输出的是属性值

}

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-02-22 20:29:58  更:2022-02-22 20:30:58 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 10:56:39-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码