前端必须掌握的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
标签：

相关文章