JS基础教程9——对象与类

简介: JavaScript 对象是拥有属性和方法的数据,例如一辆汽车,一只猫,一个人等,在 JavaScript中,几乎所有的事物都是对象。

JS基础教程9——对象与类


JS基础教程9——对象与类


JavaScript 对象是拥有属性和方法的数据,例如一辆汽车,一只猫,一个人等,在 JavaScript中,几乎所有的事物都是对象。


创建对象


对象也是一个变量,但对象可以包含多个值(多个变量),每个值以 name:value 对呈现,例如:

var peron = {
    name:"likuis",
    id:1
    };


访问对象


我们可以通过两种方式访问对象属性:


通过类似方法的形式访问


person.name;


通过类似数组的形式访问


person["name"];


对象方法


在对象中也可也写方法,例如:

var dog = {
    name:"todo",
    setName:function (name){
        this.name = name;
    }
}

访问对象方法

dog.setName("toto");
dog.name;


创建类


使用关键字class创建一个类,例如:

class car{
    mc(name,year){
        this.name=name;
        this.year=year;
    }
}

有类的时候可以使用new关键字来创建对象,例如:

var myCar = new car("Audi",2020);


构造方法


构造方法是一种特殊的方法:


  • 它必须有确切的名称的 “constructor”
  • 创建新对象时自动执行
  • 用于初始化对象属性
  • 如果您没有定义构造方法,JavaScript 会添加一个空的构造方法。


类方法


创建类方法的语法与对象方法相同。

请使用关键字 class 创建一个类。

请始终添加 constructor() 方法。

然后添加任意数量的方法.


例如:

class myMethod{
    method1(){......};
    method2(){......};
    method3(){......};
    method4(){......};
}


类继承


继承对于代码可重用性很有用,在创建新类时重用现有类的属性和方法。


使用 extends 关键字实现类的继承,例如:

class model extends car{
    ........
}

super方法


super方法表示父级的元素,在子级中使用super关键字可以使用父级的内容或者方法。

相关文章
|
4天前
|
Web App开发 JSON JavaScript
JavaScript对象常用操作JSON总结
JavaScript对象常用操作JSON总结
18 8
|
1天前
|
JavaScript 前端开发 算法
虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。
【6月更文挑战第27天】虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。当状态改变,React不直接修改DOM,而是先构建新的虚拟DOM树。通过 diff 算法比较新旧树,找到最小变更,仅更新必要部分,提高性能,避免频繁DOM操作。虚拟DOM还支持跨平台应用,如React Native。它优化了更新流程,简化开发,并提升了用户体验。
8 1
|
3天前
|
存储 JavaScript 前端开发
JavaScript中的对象是数据结构,存储键值对,键为字符串,值可为任意类型,包括函数(作为方法)
【6月更文挑战第25天】JavaScript中的对象是数据结构,存储键值对,键为字符串,值可为任意类型,包括函数(作为方法)。
10 2
|
3天前
|
JavaScript 索引
Vue.js的`v-for`用于基于数组或对象渲染列表,如遍历数组生成`<li>`元素
【6月更文挑战第25天】Vue.js的`v-for`用于基于数组或对象渲染列表,如遍历数组生成`<li>`元素。基本语法是`v-for="(item, index) in items"`,支持遍历对象的键值对。注意与`v-if`同用时应使用`<template>`,组件上使用`v-for`需设`key`属性以优化性能。
12 2
|
2天前
|
JavaScript 前端开发
技术经验分享:javaScript遍历对象、数组总结
技术经验分享:javaScript遍历对象、数组总结
技术经验分享:javaScript遍历对象、数组总结
|
3天前
|
前端开发 JavaScript 安全
解锁 JavaScript ES6:函数与对象的高级扩展功能
解锁 JavaScript ES6:函数与对象的高级扩展功能
|
3天前
|
JavaScript 前端开发 Java
遨游 JavaScript 对象星际:探索面向对象编程的深邃世界
遨游 JavaScript 对象星际:探索面向对象编程的深邃世界
|
3天前
|
前端开发 JavaScript 算法
JavaScript 中的数学与时光魔法:Math与Date对象大揭秘
JavaScript 中的数学与时光魔法:Math与Date对象大揭秘
|
3天前
|
存储 JSON JavaScript
JavaScript 魔法镜:透视对象Object与执行上下文的内在奥秘
JavaScript 魔法镜:透视对象Object与执行上下文的内在奥秘