js 访问器属性、构造函数、解构赋值

js 访问器属性、构造函数、解构赋值

访问器属性

1.对象字面量声明

一次性添加

let item = {
  // 添加data,结构更清晰
  data: {
    name: "手机",
    num: 2,
    price: 5000,
  },
};
console.log(item.data);

逐个追加

let item = {};
item.data = {};
item.data.name = "电脑";
item.data.price = 6000;
console.log(item.data);
// 读操作
item.getPrice = function () {
  return this.data.price;
};
// 写操作
item.setPrice = function (value) {
  this.data.price = value;
};
console.log(item.getPrice());
item.setPrice(2000);
console.log(item.getPrice());

2.访问接口 : 可以做数据验证

let item = {
  data: {
    name: "手机",
    price: 5000,
  },
  // ===============访问接口===================================
  // 读操作
  getPrice() {
    return this.data.price;
  },
  // 写操作
  setPrice(value) {
    this.data.price = value;
  },
  // =================================================
};
console.log(item.data);
console.log(item.getPrice());
item.setPrice(5500);
console.log(item.getPrice());

数据验证

let item = {};
item.data = {};
item.data.name = "电脑";
item.data.price = 6000;
console.log(item.data);
// 读操作
item.getPrice = function () {
  return this.data.price;
};
// 写操作
item.setPrice = function (value) {
  // 如果价格小于等于0,返回false
  if (value <= 0) return false;
  this.data.price = value;
};
console.log(item.getPrice());
item.setPrice(-2000);
console.log(item.getPrice());

3.接口属性化

let item = {
  data: {
    name: "电脑",
    price: 3000,
  },
  // name读操作
  get name() {
    return this.data.name;
  },
  // price读操作
  get price() {
    return this.data.price;
  },
};
// =============================================
console.log(`${item.data.name} : ${item.data.price}`);
console.log(`${item.name} : ${item.price}`);

构造函数 : 专用于创建对象(实例)的函数

1.自有成员

// 构造函数,必须要用new来调用
let User = function (name, price) {
  // 直接在函数中用this引用这个空对象
  // 为这个新对象添加属性或方法
  this.name = name;
  this.price = price;
  // this指向,没有指向新对象,而是指向全局
};
// new,会自动把当前的this指向新对象
let user = new User("手机", 6000);
console.log(user);

2.共享成员

let User = function (name, price) {
  // 自有属性 : 用来区分不同对象
  this.name = name;
  this.price = price;
  // 共享方法 : 调用的方法完全相同
  this.getInfo = function () {
    return `商品:${this.name},价格:${this.price}`;
  };
};
let user = new User("手机", 6000);
console.log(user);
// 两个对象的属性不同,但方法完全相同,造成了代码冗余
// 多余的方法, 实际上应该是被左右实例所共享, 只需要保留一个方法父本
// 查看对象的构造器(构造函数)
console.log(user.constructor === User); // 结果返回true
console.dir(User); //可以看到函数更多的细节
// 所有函数都有一个原型属性prototype
// 这个原型属性,对于普通函数来说, 没啥用
// 但是对于构造函数来说,极其有用
// 构造函数原型属性的成员, 可以被该构造函数的所有实例所共享
// -------------------------------------------------------------------
let User1 = function (name, price) {
  this.name = name;
  this.price = price;
};
// 将对象的共享成员挂载到原型属性
User1.prototype.getInfo = function () {
  return `商品:${this.name},价格:${this.price}`;
};
let user1 = new User1("手机", 6000);
let user2 = new User1("电脑", 8000);
console.log(user1, user2);

3.私有成员

let User = function (name, price) {
  this.name = name;
  this.price = price;
  // 私有成员
  let remarks = "数码产品";
};

4.静态成员 :当前的属性或方法,只能通过构造函数访问,不能用实例访问

let User = function (name, price) {
  this.name = name;
  this.price = price;
};
// 静态成员
// 函数也是对象, 是对象就可以添加属性
User.nation = "中国";
// 只能用当前构造器访问
console.log(User.nation);

5.继承 : 基于’原型’实现继承

// 父级构造函数
let Parent = function () {};
Parent.prototype.sum = function () {
  return this.a + this.b;
};
// 子类构造器
let Sun = function (a, b) {
  this.a = a;
  this.b = b;
};
Sun.prototype = Parent.prototype;
let sun = new Sun(10, 20);
console.log(sun.sum());

---

用类(就是函数)简化构造函数 ES6 中可以用

声明 : class Demo {}

构造方法和共享成员不能加分号

// class 声明类
class Demo {
  // 公共成员
  username = "数码";
  // 构造方法,实例初始化
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
  // 公享成员
  getInfo() {
    return `${this.name} : ${this.price}`;
  }
  // 静态成员
  static status = "123";
}
let demo = new Demo("电视", 20000);
console.log(demo.getInfo());
// 访问静态成员
console.log(Demo.status);

继承

// 父类
class Demo {
  // 构造方法,实例初始化
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
  // 公享成员
  getInfo() {
    return `名称:${this.name},价格:${this.price}元`;
  }
}
// 子类
// extends 继承
class Demo2 extends Demo {
  constructor(name, price, num) {
    // super()会自动的调用父级的构造器来初始化该实例
    super(name, price);
    this.num = num;
  }
  // 子类中对父级的方法进行扩展
  getInfo() {
    return `${super.getInfo()},数量是${this.num}台`;
  }
}
let demo2 = new Demo2("电视", 30000, 20);
console.log(demo2.getInfo());

解构赋值

1.数组解构

let user = ["张三", 25];
// 数组解构 模板=值
let [username, age] = ["张三", 25];
console.log(username, age);
// 更新
[username, age] = ["李四", 25];
console.log(username, age);
// 参数不足:默认值
[username, age, sex = "男"] = ["李四", 25];
console.log(username, age, sex);
// 参数过多
let [a, b, c, ...arr] = [1, 2, 3, 4, 5];
console.log(a, b, c);
console.log(...arr);

用途 : 两数交换

let x = 10;
let y = 20;
[y, x] = [x, y];
console.log(x, y);

2.对象解构

let { name, age } = { name: "Wang", age: 25 };
console.log(name, age);

更新

let { name, age } = { name: "Wang", age: 25 };
console.log(name, age);
// 更新  必须要用 '()' 包住内容
({ name, age } = { name: "Wang", age: 23 });
console.log(name, age);

模板冲突

let { id, name, age } = { id: 1, name: "Wang", age: 25 };
console.log(id, name, age);
// 如果左边模板中变量存在明明冲突 : 起别名
let { id: sex_id, sex } = { id: 1, sex: "男" };
console.log(sex_id, sex);

用途 : 使用对象的解构来优化函数的声明

let user = { id: 1, name: "Wang", age: 25, sex: "男" };
function getUser({ id, name, age, sex }) {
  console.log(id, name, age, sex);
}
getUser(user);