Article directory
class class and constructor
提示：以下是本篇文章正文内容，下面案例可供参考
class class
1. Create a class
constructorThe function is called when the instantiated object is created
class Car {
// 构造器方法
constructor(name, price) {
// 构造器中的this--类的实例对象
this.name = name
this.price = price
},
// 一般方法
// 这个方法放在了类的原型对象上，供实例使用
// 通过Car的实例调用该方法时，this指向的就是Car的实例对象
drive() {
console.log(`我开${
this.name}牌汽车`)
}
}
// 创建Car的实例对象
const c1 = new Car('奔驰', '50w')
const c2 = new Car('宝马', '40w')
- The method created by the assignment statement is placed on the instance itself, and the call is passed
实例对象名.方法名 - Directly declared methods are placed on the prototype object and called through
实例对象名.方法名 -
- If the method is modified in front of the method
static, this method is placed on the class itself, and the call is passed类名.方法名
- If the method is modified in front of the method
class Car {
drive() {
console.log('这个方法放在了原型对象上')
}
fun = ()=> {
console.log('这个方法放在了实例自身上')
}
static fun1 = ()=> {
console.log('我前面用static进行修饰, 我是加在类本身的方法上的方法')
}
static fun2() {
console.log('我前面用static进行修饰, 我是加在类本身的方法上的方法')
}
}
const c1 = new Car()
c1.drive()
c1.fun()
Car.fun1()
Car.fun2()
2. Inheritance
1 all inherited from the parent class
class Bus extends Car {
}
const b1 = new Bus('解放', '10W')
console.log(b1)
// Bus { name: '解放', price: '10W' }
b1.drive()
// 我开解放牌汽车
2 super keyword
// 继续上面的例子
class Bus extends Car {
constructor(name, price, load) {
super(name, price)
this.load = load
}
}
const b1 = new Bus('解放', '10W', '20t')
console.log(b1)
// Bus { name: '解放', price: '10W', load: '20t' }
superKeywords can only be executed at the top of the constructor function
2.1 Inheritance relationship in class
// 继续上面的例子
b1.drive()
// 我开解放牌汽车
At this time, b1there is no method on the prototype object Bus , so the prototype object driveis found upward through the prototype chain , and the prototype is on , so at this time, the above method is called through the prototype chainCarCardriveb1Car
class Bus extends Car {
constructor(name, price, load) {
super(name, price)
this.load = load
}
drive() {
console.log(`我开${
this.name}牌汽车，我的载重是${
this.load}`)
}
}
const b1 = new Bus('解放', '10W', '20t')
b1.drive()
// 我开解放牌汽车，我的载重是20t
At this point, b1there are methods on the prototype object Bus drive, so the method b1on its prototype object is calleddrive
2.2 super calls ordinary functions in the parent class
class Car {
constructor(name, price) {
this.name = name
this.price = price
}
drive() {
return `我是${
this.name}牌汽车，我的价格是${
this.price}`
}
}
class Bus extends Car {
constructor(name, price, weight) {
super(name, price)
this.weight = weight
}
drive() {
console.log(super.drive() + '，我的载重是' + this.weight)
}
}
const b1 = new Bus('解放', '10w', '10t')
b1.drive()
In the ordinary function of the subclass, super.父类函数名()the ordinary function in the parent class can be called by
Constructors and Prototypes
1 Create a constructor
function Car(name, price) {
this.name = name
this.price = price
this.drive = ()=> {
console.log(`我是${
this.name}牌汽车，我的价格是${
this.price}`)
}
}
const c1 = new Car('奔驰', '50w')
console.log(c1)
c1.drive()
2 Instance members and static members
The properties and methods in the constructor are collectively called members.
- Instance members are members added through this in the constructor. Instance members can only be accessed through instance objects, not through constructors
- Static resources are members added in the constructor itself. Static resources can only be accessed through constructors, not instance objects
function Car(name, price) {
this.name = name
this.price = price
this.drive = ()=> {
console.log(`我是${
this.name}牌汽车，我的价格是${
this.price}`)
}
}
Car.country = '美国'
const c1 = new Car('奔驰', '50w')
// name price drive都是实例成员，只能通过实例对象进行访问，不能通过构造函数进行访问
console.log(c1.price) // 50w
console.log(Car.price) // undefined
// length是在构造函数本身添加的成员，所以是静态成员
console.log(c1.country) // undefined
console.log(Car.country) // 美国
3 prototype prototype object
When creating a constructor, we should not define the invariant method inside the constructor, which wastes memory, but define it on the constructor prototypeprototype object.
function Car(name, price) {
this.name = name
this.price = price
}
// 这里如果用箭头函数，会造成this为undifined
Car.prototype.drive = function() {
console.log(`我是${
this.name}牌汽车，我的价格是${
this.price}`)
}
const c1 = new Car('奔驰', '50w')
c1.drive()
- A prototype is an object, we also call it
prototypea prototype object - After we define the method on
prototypethe prototype object, all instances can use this method without opening up new space in memory - There is an attribute constructor on the prototype prototype object, which points to the constructor itself.
- The this in the prototype prototype object points to the instance object
4 Object prototype __proto__
There is a property on the object __proto__, which points to the prototypeprototype object of the constructor of the instance object
- The properties of the instance object are equivalent to the properties
__proto__of the constructorprototype - When calling, first check whether there is a method to be called on the instance object, if not, go to
__proto__search for the corresponding method, which is equivalent toprototypesearching on the prototype object of the constructor.
5 prototype chain
c1By c1.__proto__pointing Car.prototype, the prototype object prototype of car is also an object, and it also has __proto__attributes, Car.prototype.__proto__pointing to Object.prototypethe prototype object, Object.prototype.__proto__pointing tonull
6 inheritance
function Father (fullName, age) {
this.fullName = fullName
this.age = age
}
Father.prototype.say = function() {
console.log('我要说', this.fullName)
}
function Son (fullName, age, height) {
// 通过call方法，调用构造函数Father，并将他的this修改为Son
// 通过这种方法继承构造函数内部的属性和方法
Father.call(this, fullName, age)
this.height = height
}
// 通过这种方式继承挂载到原型对象上的属性和方法
Son.prototype = new Father()
// 再手动将constructor指向回Son
Son.prototype.constructor = Son
const s = new Son('小明', 18, '180')
console.log(s)
s.say()