JavaScript面向对象

面向对象与面向过程

面向对象（OOP）

理解：面向对象的思想是把一个项目、一件事情分成更小的项目，或者说分成一个个更小的部分，每一部分负责什么方面的功能，最后再由这些部分组合而成为一个整体。
优点：容易扩展、容易维护（由于面向对象有继承、封装、多态的特性，可以让系统更加灵活）。
缺点：性能比面向过程低。

面向过程（POP）

理解：面向过程的思想是把一个项目、一件事情按照一定的顺序，从头到尾一步一步地做下去，先做什么，后做什么，一直到结束。
优点：比面向对象性能好，适合与硬件联系密切的东西。
缺点：不容易扩展、不容易维护。

1.标题自定义对象的创建

使用字面量创建对象（obj={}字面量创建）
使用构造函数创建对象（new Object）

弊端：如果要创建多个对象，代码重复太多，冗余

var person1 = new Object();
        person1.name = 'zhangsan';
        person1.age = 100;
        person1.showinfo = function () {
            return '我的姓名是：' + person1.name + '我的年龄：' + person1.age;
        }


        var person2 = new Object();
        person2.name = 'lisi';
        person2.age = 200;
        person2.showinfo = function () {
            return '我的姓名是：' + person2.name + '我的年龄：' + person2.age;
        }

 
        console.log(person1.name);
        console.log(person2.name); 

2.工厂模式

工厂模式解决创建多个对象出现代码冗余的问题

工厂模式的弊端：无法识别对象的类型，对象来自于Object

 function createPerson(name, age) {
            //原材料
            var person1 = new Object();
            //加工
            person1.name = name;
            person1.age = age;
            person1.showinfo = function () {
                return '我的姓名是：' + person1.name + '我的年龄：' + person1.age;
            }
            //出厂
            return person1;
        }
        console.log(createPerson('zhangsan',100).name)
        console.log(createPerson('lisi',200).name) 
        let p1=createPerson('zhangsan',100);
        let p2=createPerson('lisi',200); 
        console.log(p1.name);
        console.log(p2.name); 

3. 使用构造函数(首字母大写，new关键字调用)

构造函数：是一个普通函数，当它和new运算符一起使用时，我们称之为构造函数，构造函数的首字母大写。

• 使用new操作符调用构造函数时，它会在内容中开辟一块储存空间 并返回他的地址，堆（内存）中开辟储存空间。
• 构造函数 是使用new来构造实例对象 ，是抽象的，不占用内存
• 对象（new出来的实例对象）通过实例化一个具体的对象，拥有属性和方法，是具体的，占用内存

new运算符调用时内部会发生以下变化:

• 创建一个空对象，并且 this 变量指向该对象，同时还继承了该函数的原型。
• 属性和方法被加入到 this 引用的对象中。
• 并且最后隐式的返回 this

构造函数弊端:内部的属性和方法是私有的。如果使用对象上面的方法，方法会被重新创建，影响性能。

 function CreatePerson(name, age) {
            this.name = name;
            this.age = age;
            this.showinfo = function () {
                return '我的姓名是：' + this.name + '我的年龄：' + this.age;
            }
        }
        let p1=new CreatePerson('zhangsan',100);
        let p2=new CreatePerson('lisi',200); 
        console.log(p1.name);
        console.log(p2.name); 

关于this指向

this 的概念

- this 是JS中的一个关键字
- 只存在于函数内部
- this的指向会改变

改变this指向

-   普通函数，定时器函数，回调函数，自执行函数---指向window
-	对象方法，构造函数，事件处理函数---this指向调用者
-	严格模式下，禁止this指向全局对象
-	箭头函数里的this指向父级，且this的指向不会改变

4.构造函数+原型（prototype）

• prototype是系统提供的原型属性，每一个函数下面都有一个原型属性 ,内部的this指向new出来的实例对象。
• instanceof运算符是用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上

        function CreatePerson(name, age) {//构造函数
            this.name = name;
            this.age = age;
        }

        CreatePerson.prototype.showinfo=function(){//原型
            return '我的姓名是：' + this.name + '我的年龄：' + this.age;
        }


        let p1=new CreatePerson('zhangsan',100);
        let p2=new CreatePerson('lisi',200); 
        console.log(p1.name);
        console.log(p2.name); 

原型链

• prototype（原型属性）：JavaScript规定；每个函数都拥有一个prototype的对象属性，指向另一个对象（原型链）；
• proto（内置属性）：JS再创建对象的时候，都有一个叫做 __proto__的内置属性，此属性指向创建它的函数对象原型prototype；
• 每个对象都有一个 proto（内置属性）指向构造函数的原型 （prototype）

原型链的过程

作为一个对象，当你访问其中的一个属性或方法的时候，如果这个对象中没有这个方法或属性，那么Javascript引擎将会访问这个对象的__proto属性所指向上一个对象，并在那个对象中查找指定的方法或属性，如果不能找到，那就会继续通过那个对象的__proto__属性指向的对象进行向上查找，直到这个链表结束。(null)

逆战班LMJ–2020.2.23