JS面向对象
原创
面向对象和面向过程区别
面向对象是把构成问题的事物拆解为各个对象，来描述这个事物在当前问题中的行为，而不是为了实现某个步骤 面向过程，是分析出实现问题的每个步骤，然后编写函数，并依次调用。
面向对象特点
- 封装 让使用的人不考虑内部实现，只考虑功能使用，把内部代码保护起来，提供api接口让用户调用
- 继承 从父类继承出一些方法和属性，利于代码复用
- 多态 不同对象作用于同一操作产生不能效果
JS三大对象
- 宿主对象
- 所有非本地对象都属于宿主对象
- 所有DOM和BOM对象都属于宿主对象
- 嵌入到网页的JS来说，宿主对象就是浏览器提供的，比如：Window和Documnet等
- 本地对象
- 包括：Object、Array、Date、RegExp、Boolean、Number、String
- 这些引用类型在运行过程中需要通过new来创建所需的实例对象
- 内置对象
- 是本地对象的子集
- 在ECMAScript程序开始执行前就存在，本身就是实例化内置对象，开发者无需再实例化
- 内置独享有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)//true2. 构造函数/创建实例 通过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)//true4. 实例成员、静态成员 构造函数中可以添加一些成员，可以在构造函数本身上添加(静态成员)，也可以通过构造函数内部的 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我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。