1. Object-oriented
(1) What is an object? Why object-oriented?
Through the abstraction of the code, and then describe the way of a single type of object.
(2) Features: object-oriented-logic migration is more flexible, code reusability is higher, and high modularity.
(3) Understanding of objects
1. An object is a simple abstraction of a single object;
2. The object is a container that encapsulates properties and methods
**Properties: object state
**method: the ability/behavior of the object
//简单对象
const Course = {
teacher: 'tom',
leader: 'xh',
startCourse: name => {
return `开始${name}课`
}
}
//A同学
Course.teacher = 'xxx'
Course.startCourse('react')
//B同学
Course.startCourse('vue') //发现即使课变了,但是老师也被修改了
//引出函数对象
function Course(){
this.teacher='tom'
this.leader='xh'
this.startCourse= name => {
return `开始${name}课`
}
} ##Constructor
####Need a template - characterize the common properties of a class of objects to generate objects.
#### Classes are object templates
#### The essence of js is not based on class, but based on constructor + prototype chain
### Course is essentially a constructor
*1. The this used in the function body points to the instance to be generated;
2. The generated object is instantiated with new;
3. You can initialize the parameters.
function Course() {
this.teacher = 'tom' //这里的this其实指向course 这个实例对象
this.leader = 'xh'
this.startCourse = name => {
return `开始${name}课`
}
}
const course = new Course(args)####Question: If the constructor is not initialized, can it have the same ability? -> Cannot have
####If it needs to be used in the project and does not want the outside world to perceive it, how can the outside world get the instantiated object directly? =>Singleton mode
function Course() {
const _isClass = this instanceof Course
//未实例化
if (!_isClass) {
return new Course
}
this.teacher = 'tom'
this.leader = 'xh'
this.startCourse = name => {
return `开始${name}课`
}
}
//使用方
const course=Course()Inspiration: When writing the underlying API code, try not to allow the outside world to perceive and distinguish internal types.
####Thinking: What is new?/What is the principle of new?/What did you do when you were new?
function Course() { }
const course = new Course()*Summary: 1. Structurally: an empty object is created as the returned object instance;
2. On attributes: point the prototype object that generates an empty object to the prototype attribute of the constructor;
3. Relationally: the current instance object is assigned to the internal this;
4. In the life cycle: the initialization code of the constructor is executed.
#### Follow-up: Instance attribute effects - independent
function Course(teacher, leader) {
this.teacher = teacher
this.leader = leader
}
const course1 = new Course('tom', 'xh')//course1.teacher ->tom
const course2= new Course('steven', 'bubu')//course2.teacher ->steven
course2.teacher='xxx'//course.teacher=>tom
//分析过程:course1 是构造函数的实例化对象,而this指向了这个实例化对象,所以this.teacher和this.leader
//是实例化对象上的属性,而构造函数new Course时,调用了Course()这个函数传入的参数,所以实例化对象的teacher
//属性也就指向了调用Course()这个函数传入的参数.
###Putting high: handwriting a new with js
function usernew(obj, ...args) {
const newObj = Object.create(obj.prototype)
const result = obj.apply(newObj, args)
return typeof result === 'object' ? result : newObj
}### What is a constructor?
function Course(teacher, leader) {
this.teacher = teacher
this.leader = leader
}
const course1 = new Course('tom', 'xh')//course1.teacher ->tom*1. When each object is created, it will automatically have a constructor attribute constructor;
2. The constructor is derived from the prototype object and points to the reference of the constructor.
* The instance gets the properties of the template => (bold point) inherits the properties of the class
#### prototype object
function Course(){}
const course1 = new Course()
const course2 = new Course()
//1.Course - 用来初始化创建对象的函数 | 类
course1.__proto__===Course.prototype
//2.course1 - 根据原型创建出来的实例
course1.constructor===CourseWhat is *prototype?
function Course() {
this.teacher = 'tom'
this.leader = 'xh'
}
Course.prototype.startCourse = name => {
return `开始${name}课`
}
const course1 = new Course()*Question: Does the prototype object have its own prototype chain?
course1.__proto__.__proto__ === Object.prototype
Course.prototype.__proto__ === Object.prototype
course1.__proto__.__proto__.__proto__ === nullprototype chain
Complete prototype diagram:
**inherit
How does js implement inheritance?
####All attribute methods in the prototype object can be shared by the instance
function Game() {
this.name = 'lol'
}
Game.prototype.getName = function () {
return this.name
}
//LOL
function LOL() { }
LOL.prototype = new Game()//将LOL的原型对象指向Game的实例
LOL.prototype.constructor = LOL
const game = new LOL()Essence: Rewrite the prototype object method, use the property method of the parent object as the property method of the self-prototype object, and rewrite the constructor at the same time.
####Question: What are the disadvantages of direct inheritance of the prototype chain?
function Game() {
this.name = 'lol'
this.skin=['s']
}
Game.prototype.getName = function () {
return this.name
}
function LOL() { }
LOL.prototype = new Game()//将LOL的原型对象指向Game的实例
LOL.prototype.constructor = LOL
const game1 = new LOL()
const game2 = new LOL()//game2也会拿到新添加的属性值
game1.skin.push('ss')*1. Once the parent class attribute is assigned to the prototype attribute of the subclass, the attribute belongs to the shared attribute of the subclass at this time;
*2. When instantiating a subclass, the element cannot pass parameters to the parent class.
###Solution: constructor inheritance
####Classic inheritance: use the constructor of the parent class inside the constructor of the subclass
function Game(args) {
this.name = 'lol'
this.skin = ['s']
}
Game.prototype.getName = function () {
return this.name
}
function LOL(args) {
Game.apply(this, args)//调用Game的this,并传递参数
}
const game3 = new LOL('args')Solved the problem of shared attributes + the problem of passing parameters from the child to the parent.
###Question:: The shared method on the prototype chain cannot be read and inherited, how to solve it?
#### Composition Inheritance
function Game(args) {
this.name = 'lol'
this.skin = ['s']
}
Game.prototype.getName = function () {
return this.name
}
function LOL(args) {
Game.apply(this, args)//调用Game的this,并传递参数
}
LOL.prototype = new Game()//调用
LOL.prototype.constructor = LOL
const game4 = new LOL('args')//调用###Follow-up: Disadvantages of combined inheritance? The problem is that no matter what the scenario is, the constructor of the parent class will be called twice.
### Solution: Parasitic Composition Inheritance
function Game(args) {
this.name = 'lol'
this.skin = ['s']
}
Game.prototype.getName = function () {
return this.name
}
function LOL(args) {
Game.apply(this, args)//调用Game的this,并传递参数
}
LOL.prototype =Object.create(Game.prototype)//关键点
LOL.prototype.constructor = LOL
const game5 = new LOL('args')//调用###Baogao: How to achieve multiple inheritance?
function Game(args) {
this.name = 'lol'
this.skin = ['s']
}
Game.prototype.getName = function () {
return this.name
}
function Store() {
this.shop = 'steam'
}
Game.prototype.getPlatform = function () {
return this.shop
}
function LOL(args) {
Game.apply(this, args)//调用Game的this,并传递参数
Store.apply(this, args)
}
LOL.prototype = Object.create(Game.prototype)//关键点
// Store.prototype =Object.create(Game.prototype)会冲掉 LOL.prototype
Object.assign(Store.prototype, LOL.prototype)
LOL.prototype.constructor = LOL