提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

Js原型链与类

JS 对象
2023-02-25 18:16:05 时间

理解原型链与类有利于我们对代码的封装与简化

# JS原型链理论

# 1、函数与对象的关系

  • 函数是对象，对象都是通过函数创建的。
  • 函数与对象并不是简单的包含与被包含的关系。

# 2、原型的类别

  • 显示原型：prototype，是每个函数function独有的属性。
  • 隐式原型: __proto__，是每个对象都具有的属性。

# 3、原型和原型链

  • 原型：一个函数可以看成一个类，原型是所有类都有的一个属性，原型的作用就是给这个类的一个对象都添加一个统一的方法。
  • 原型链：每个对象都有一个__proto__，它指向它的prototype原型对象； 它的prototype原型对象又有一个__proto__指向它的prototype原型对象， 就这样层层向上直到最终找到顶级对象Object的prototype，这个查询路径就是原型链。

# 4、JS两个概念

  • Function 是JavaScript 里最顶层的构造器，它构造了系统中的所有对象，包括定义对象、系统内置对象、甚至包括它自己。
  • Object 是最顶层的对象， 所有对象都是继承 Object 的原型， Object 也是被 Function 构造出来的。（Object.prototype）

# JS类的理论

# 1、创建类

  • 类是用于创建对象的模板。
  • 使用 class 关键字来创建一个类，类体在一对大括号 {} 中，我们可以在大括号 {} 中定义类成员的位置，如方法或构造函数。 每个类中包含了一个特殊的方法 constructor()，它是类的构造函数，这种方法用于创建和初始化一个由 class 创建的对象。
  • 创建对象时会自动调用构造函数方法 constructor()。

# 2、类表达式

  • 类表达式是定义类的另一种方法，类表达式可以命名或不命名。
  • 命名类表达式的名称是该类体的局部名称。
// 未命名/匿名类
let test = class {
  constructor(name, url) {
    this.name = name;
    this.url = url;
  }
};
console.log(test.name);
// output: "test"
 
// 命名类
let test = class test2 {
  constructor(name, url) {
    this.name = name;
    this.url = url;
  }
};
console.log(test.name);
// 输出: "test2"

# 3、类的方法

构造方法

  • 构造方法是一种特殊的方法：
  • 构造方法名为 constructor()。
  • 构造方法在创建新对象时会自动执行。
  • 构造方法用于初始化对象属性。
  • 如果不定义构造方法，JavaScript 会自动添加一个空的构造方法。

类方法的使用

  • 我们使用关键字 class 创建一个类，可以添加一个 constructor() 方法，然后添加任意数量的方法。
class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}
  • 通过new关键词来实例,向类的方法发送参数
class timer {
    constructor(name, year) {
        this.name = name;
        this.year = year;
    }
    age(x) {
        return x - this.year;
    }
}

let date = new Date();
let year = date.getFullYear();

let t = new timer("张三", 2000);
console.log('张三' + t.age(year) + '岁了。')//张三22岁了。

# 4、类的总结

  • 类中的构造器不是必须写的，要对实例进行一些初始化操作，如添加指定操作时才写。
  • 如果A类继承了B类，且A类写了构造器，那么A类的构造器必须调用super。
  • 类所定义的方法，都是放在类的原型对象上，供实例去使用。
  class person{
    constructor(name,age){
        this.name = name
        this.age = age
    }
    speak(){
        console.log(`我叫${this.name}，今年${this.age}岁`)
    }
}
class son extends person{
    constructor(name,age,job){
        super(name,age)
        this.job = job
    }
    speak(){
        console.log(`我叫${this.name}，今年${this.age}岁,工作是${this.job}`)
    }
}
let p1 = new person('张三',20);
let p2 = new person('李四',30);
let s = new son('王五',33,'医生');

p1.speak()
p2.speak()
s.speak()
console.log(p1)
console.log(p2)

相关文章