JavaScript基础篇：对象概念及访问器的属性

JavaScript对象概念及访问器的属性

一、 对象

概念：定义一个对象成员包括：

属性：类似于变量
方法：类似于函数

//定义一个对象
const product = {
// 1. 定义一个数组属性
  data: [
    { id: 1, name: "手机", price: 5000, num: 5 },
    { id: 2, name: "电脑", price: 4000, num: 15 },
    { id: 3, name: "相机", price: 14000, num: 10 },
  ],

  // 2. 定义一个函数方法
  // es6的方法的简化，将冒号和function可以删除
  getAmounts () {
    // 计算总金额
    return this.data.reduce((t, c) => (t += c.price * c.num), 0);
  },
};

下面是调用对象的方法

console.log("总金额 = %d元 ", product.getAmounts());
//总金额 = 225000元 

二、 对象访问器的属性

访问器属性：将一个方法伪装/包装成一个属性(优先级大于属性)

• get:是读取，也叫读操作
• set访问器属性的写操作

//定义一个对象
const product = {
// 1. 定义一个数组属性
  data: [
    { id: 1, name: "手机", price: 5000, num: 5 },
    { id: 2, name: "电脑", price: 4000, num: 15 },
    { id: 3, name: "相机", price: 14000, num: 10 },
  ],

  // 2. 定义一个函数方法
  // es6的方法的简化，将冒号和function可以删除
  getAmounts () {
    // 计算总金额
    return this.data.reduce((t, c) => (t += c.price * c.num), 0);
  },
  
  // 3.定义了一个 get 读操作，一般会修饰私有属性后展示给客户端
  get total() {
	return this.data.reduce((t, c) => (t += c.price * c.num), 0);
  },
  
  // 4.定义了一个 set 写入操作，允许用户写入数据
  set setPrice(price) {
	this.data[1].price = price;
  },
};

下面是调用对象的访问器

//不想用方法，想用属性的方式来获取总金额
console.log("总金额 = %d元 ", product.total); //   总金额 = 225000元 

// 调用 set 写入方法
product.setPrice = 8000;
console.log(product.data[1].price);  // 输出  8000

访问器属性的优先级高于同名的普通属性

let user = {
  data: { name: '是 data 里面的 RQ 桑' },
  
  get name() {
    return this.data.name;
  },
  
  set name(v) {
    return (this.data.name = v);
  },
};

//  调用 get 访问器上的属性，获得 data 里的值  点语法访问对象的内部
console.log(user.name); //是 data 里面的 RQ 桑
 
//  调用 set 访问器上的属性，写入（修改） data 里的值
user.name = "是 set 写入的 RQ 桑";
console.log(user.name);  //输出    是 set 写入的 RQ 桑

//  原来的 data 里的值也变成了 set 写入的值了
console.log(user.data.name);  //输出   是 set 写入的 RQ 桑
//   访问器属性的优先级高于同名的普通属性

如果本文对您有帮助，记得留下你的点赞窝！