面向对象的JavaScript

使用class来创建对象

使用constructor来构造对象的属性

在对象内构造对象的方法

class User {
  //使用constructor构造器来构造User对象的属性
  constructor(username, age) {
     this.username = username;
     this.age = age;
  }
  //构造User对象的方法
  login() {
    console.log(`${this.username} just logged in`);
    return this;
  }
}

//调用User对象的属性
const userOne = new User("wj", 22);
console.log(userOne);

//调用User对象的方法
userOne.login();

继承对象的属性和方法

//创建一个新的对象Admin，使用关键词extends，让Admin继承User对象
class Admin extends User {
  //构造器函数的参数传入来自User对象的属性
  constructor(username, age, title) {
    //使用super方法继承User对象的属性
    super(username, age);
    //这里还可以添加只属于Admin对象自己的属性title
    this.title = title;
  }
  //添加Admin对象的方法deleteUser
  deleteUser(user) {
    users = users.filter((u) => u.username !== user.username);
  }
}

//调用Admin对象的属性
const userTwo = new Admin("shaun", 20);
console.log(userTwo);

//调用Admin对象的方法
let users = [userOne, userTwo];
console.log(users);
userTwo.deleteUser(userTwo);
console.log(users);

如果不使用class关键字来构造对象？

//使用构造函数构造User对象
function User(username, age) {
     this.username = username;
     this.age = age;
}
//使用User对象的原型属性来构造User对象的方法
User.prototype.login = function () {
    console.log(`${this.username} just logged in`);
    return this;
}

//调用User对象的属性
const userOne = new User("wj", 22);
console.log(userOne);

//调用User对象的方法
userOne.login();

 继承

// Admin对象的构造器函数传入来自User对象的参数username和age
function Admin(username, age, title) {
  // 对User对象使用call方法来继承User对象的username和age属性；注意call方法的第一个参数必须为this，this指向的是User对象
  User.call(this, username, age);
  // 添加Admin对象自己的属性title
  this.title = title;
}

// 继承User对象的方法
Admin.prototype = Object.create(User.prototype);
// 添加Admin对象自己的方法
Admin.prototype.deleteUser = function (user) {
  users = users.filter((u) => u.username !== user.username);
};

//调用Admin对象的属性
const userTwo = new Admin("shaun", 20);
console.log(userTwo);

//调用Admin对象的方法
let users = [userOne, userTwo];
console.log(users);
userTwo.deleteUser(userTwo);
console.log(users);

 

控制台里可以看到一个对象内，有prototype(_proto_)这个属性，prototype属性内存有这个对象的所有方法，在末尾又有一个prototype(_proto_)属性，这就是原型链（一个对象继承了另一个对象的属性和方法形成的）。

我们可以在控制台新建一个js内置对象来观察原型链 ：

1.在控制台输入 new XMLHttpRequest

 

 

 

 这就是一个很长的原型链。

我们还会发现原型链最后一个prototype(_proto_)属性都是相同的：

prototype:Object

每一个对象都继承自它。