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.普通方式 缺点：无法识别对象类型

代码语言：javascript复制

function createObject() {
            const Player = new Object();
            Player.color = "white";
            Player.start = function () {
                console.log("走这里了吗");
            };
            return Player;
        }
const red = createObject();

代码语言：javascript复制

console.log(red)
//{color: "white", start: ƒ}
console.log(red.constructor)
//无法识别对象类型
//ƒ Object() { [native code] }

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

代码语言：javascript复制

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

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

代码语言：javascript复制

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对象；通过实例创建的方法和属性不会开辟新的空间，可以判断实例的类型 缺点：共享一份原型

代码语言：javascript复制

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 添加（实例成员） 绑定在构造函数上的属性方法，需要通过构造函数来访问

代码语言：javascript复制

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

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！

2023腾讯·技术创作特训营第三期

0 人点赞