Js原型链与类
理解原型链与类有利于我们对代码的封装与简化
# 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)