前端必须掌握的JS面向对象

时间:2023-02-01 12:15:21

前端必须掌握的JS面向对象

面向对象和面向过程区别

面向对象是把构成问题的事物拆解为各个对象,来描述这个事物在当前问题中的行为,而不是为了实现某个步骤。
面向过程,是分析出实现问题的每个步骤,然后编写函数,并依次调用。

面向对象特点

  • 封装 让使用的人不考虑内部实现,只考虑功能使用,把内部代码保护起来,提供api接口让用户调用
  • 继承 从父类继承出一些方法和属性,利于代码复用
  • 多态 不同对象作用于同一操作产生不能效果

JS三大对象

  • 宿主对象
  1. 所有非本地对象都属于宿主对象
  2. 所有DOM和BOM对象都属于宿主对象
  3. 嵌入到网页的JS来说,宿主对象就是浏览器提供的,比如:Window和Documnet等
  • 本地对象
  1. 包括:Object、Array、Date、RegExp、Boolean、Number、String
  2. 这些引用类型在运行过程中需要通过new来创建所需的实例对象
  • 内置对象
  1. 是本地对象的子集
  2. 在ECMAScript程序开始执行前就存在,本身就是实例化内置对象,开发者无需再实例化
  3. 内置独享有Global、Math

创建对象

1.普通方式
缺点:无法识别对象类型

function createObject() {
const Player = new Object();
Player.color = "white";
Player.start = function () {
console.log("走这里了吗");
};
return Player;
}
const red = createObject();
console.log(red)
//{color: "white", start: ƒ}
console.log(red.constructor)
//无法识别对象类型
//ƒ Object() { [native code] }

constructor为构造函数的原型上的所特有属性,不可枚举,它有两个作用:
1.判断数据类型
2.对象实例通过constructor对象访问它的构造函数
如果创建一个对象来改变它的原型,constructor就不能判断数据类型

function fn(){}
fn.prototype = new Array();
var f = fn();
console.log(f.constructor===fn)//false
console.log(f.constructor===Array)//true

2. 构造函数/创建实例
通过this添加的对象和属性都指向当前对象,所以在实例化的时候,通过this添加的方法和属性都会在内存中复制一份。
优点:改变某一实例对象的方法或者属性,不影响其他的实例对象
缺点:每生成一个实例,构造函数内部方法和属性都会重新开辟一份空间

Player(val) {
this.color = val;
this.start = function () {
console.log("走这里了吗 ");
};
}
const demo1 = new Player('red');
const demo2 = new Player('white');
console.log(demo1)
//Player {color: "red", start: ƒ}
console.log(demo1.constructor)
//ƒ Player(val) {
// this.color = val;
// this.start = function () {
// console.log("走这里了吗 ");
// };
// }

demo1和demo2占据不同的内存空间,事实证明demo1.start != demo2.start
3. 原型
通过原型继承的方法和属性并不是自身的,需要通过原型链一层一层的查找。
优点:在内存中​​创建一次​​,实例化对象都会指向prototype对象;通过实例创建的方法和属性不会开辟新的空间,可以​​判断实例的类型​​ 缺点:共享一份原型

function Fn(val){
this.color = val
}
Fn.prototype.start = function(){
console.log(val)
}
const demo1 = new Fn('white')
const demo2 = new Fn('red')
conslole.log(Fn.prototype)
//{start: ƒ, constructor: ƒ}
conslole.log(demo1.constructor)
// ƒ Player(val) {
// this.color = val;
// }
console.log(demo1.constructor===demo2.constructor)//true
console.log(demo1.strat===demo2.start)//true

4. 实例成员、静态成员
构造函数中可以添加一些成员,可以在构造函数本身上添加(静态成员),也可以通过构造函数内部的 this 添加(实例成员)
绑定在构造函数上的属性方法,需要通过构造函数来访问

function Fn(val){
if(!Fn.num) Fn.num=0
Fn.num++;
this.color = val;
}
let demo1 = new Fn('red')
console.log(Fn.num)//1
let demo2 = new Fn('blue')
console.log(Fn.num)//2
console.log(demo1.num)//undefined
console.log(demo1.color)//red