属性访问器
笼统概念：
属性访问器就是访问对象属性的⼀种⼯具、方法。
对象属性的分类
在js中，对象的属性分为两类：
- 数据属性：拥有四大属性特性的属性都属于数据属性。你自定的属性默认都具有四大属性特性。
- [[configurable]]：可配置
- [[enumerable]]：可枚举
- [[wtitable]]：可修改
- [[value]]：值
- 访问器属性：拥有下面四大特性的的属性就是访问器属性。
- [[configurable]]：可配置
- [[enumerable]]：可枚举
- [[get]]：可修改
- [[set]]：值
访问器属性
定义的解释：
- 访问器属性是一种特殊的属性。
- 它是属性，不是方法！！！
- 访问器属性：属性还是那个属性
//get是定义访问器属性的一个关键字
get fakeAge // fakeAge是你自定义的属性名 属性还是属性
- 访问器属性：访问器是一个函数，通过这个函数你可以访问对象的其他属性。
//访问器是一个函数
() {
let num = this.age + 10
return num
}
- 访问器属性就是把一个函数绑定到一个属性名上，访问该属性会自动调用绑定的函数。
属性访问器的语法
属性访问器分为两种：
- get：是一个关键字 。用于为属性绑定函数。在函数体内读取对象的其他属性。这种属性访问器被成为"Getter"
- set：是一个关键字。用于为属性绑定函数。在函数体内设置对象的其他属性的值。这种属性访问器被成为"Setter"
语法
{get 属性名(){}} //禁止传参
{set 属性名(value){}}// 必须传一个参
getter和setter在js中的应用
// rectangle：正方形 getBoundingClientRect() //获取元素视口坐标
// 创建一个rect的类
class Rect{
constructor(w,h){
// 创建一个 this = {}
this.width = w;
this.height = h
}
get area(){
return this.width * this.height
}
}
// 类是用来创建实例对象
const r = new Rect(50,60)
// 要求：求正方形面积
console.log(r.area);
总结
1.getter和setter是什么? (属性访问器) 器 => 函数
2.getter和setter是一种定义对象属性的特殊方法。特殊在于他为属性绑定了一个函数，在访问该属性时，会自动调用函数。
3.定义：访问器属性就是把一个函数绑定到一个属性名上，访问该属性会自动调用绑定的函数。
4.语法
- 访问属性不加小括号
- 定义get不要传参，要传retrun
- 定义set要传参,不要传retrun
- 在getter中，读取对象的其他属性,然后进行操作
- 在setter中，读取对象的其他属性
Modules
- HTML：没有"模块"概念
- CSS：通过
@import导入模块 - JS：ES6通过
export和import两个关键词实现模板化- export：进口 => 导出
- import：出口 => 导入
- Prort：港口 (港口城市: port city)
模块的概念
- Js
modules允许将代码分解成单独保存文件，这写单独的⽂件就是模块。 - 模块的特点：复用性 + 便于维护
- 模块的类型：只有function和value、Class才可以成为模块。
如何创建模块
第一步：使用两个声明关键字
- export：导出
- import：导入
第二步：拆分代码到独立文件中
- app
- index.html
- js
- index.js
- lib1.js(库文件：library)
- lib2.js
第三步：index.html文件中添加type='module'属性
` <script src="./js/index.js" type = 'module'></script>`
第四步：使用export声明你要导出的模块
//命名导出：强调名称必须⼀致，且必须使⽤⼤括号
///////⼀. 导出声明：把export关键字放在let、const、fucntion、class前⾯
//1. 导⼊声明：①变量名称必须⼀致 ②变量名称必须放在⼤括号⾥
//2. 导出变量列表
//3. 导出⼦模块
//⼆、默认导出
第五步：创建导入模块
//导出声明：把export关键字放在let、const、function、class前面
//导入声明：1.变量名称必须一致
导出声明
export const PI = 3.1415926
export let num = 123
export const arr = ['a','b','c']
export const obj = {x:1,y:2,z:3}
export const fn = function(){ console.log('hello world') }
export class User{
constructor(name,age){
this.username = name
this.age = age
}
getUser(){
console.log(this.username + ' ' + this.age);
}
}
import {PI,num,arr,obj,fn,User} from './lib1.js'
console.log(PI);
console.log(num);
console.log(arr);
console.log(obj);
fn()
const user1 = new User('王⼩蒙',19)
user1.getUser()
// import {PI,num,arr,obj,fn,User} from './lib1.js'
import * as myVar from './lib1.js'
console.log(myVar.PI);
console.log(myVar.num);
console.log(myVar.arr);
console.log(myVar.obj);
myVar.fn()
const user1 = new myVar.User('王⼤蒙',19)
user1.getUser()
导出变量列表
const PI = 3.1415926
let num = 123
const arr = ['a','b','c']
const obj = {x:1,y:2,z:3}
const fn = function(){ console.log('hello world') }
class User{
constructor(name,age){
this.username = name
this.age = age
}
getUser(){
console.log(this.username + ' ' + this.age);
}
}
export {PI,num,arr,obj,fn,User}
