面向对象和面向过程区别
面向对象是把构成问题的事物拆解为各个对象，来描述这个事物在当前问题中的行为，而不是为了实现某个步骤
面向过程，是分析出实现问题的每个步骤，然后编写函数，并依次调用
面向对象特点
- 封装
让使用的人不考虑内部实现，只考虑功能使用，把内部代码保护起来，提供api接口让用户调用 - 继承
从父类继承出一些方法和属性，利于代码复用 - 多态
不同对象作用于同一操作产生不能效果
JS三大对象
- 宿主对象
- 所有非本地对象都属于宿主对象
- 所有DOM和BOM对象都属于宿主对象
- 嵌入到网页的JS来说，宿主对象就是浏览器提供的，比如：Window和Documnet等
- 本地对象
1.包括：Object、Array、Date、RegExp、Boolean、Number、String
2.这些引用类型在运行过程中需要通过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)//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
