面向对象总结---逆战班

1.编程思想

面向过程（POP）：更加注重过程，分布执行；分析解决问题所需要的步骤，依次执行，先具体，再整体
面向对象（OOP）：关注的是整体，按照模块执行；把构成问题的事务分解成对象，描述这些对象的行为，先整体，再具体

2.创建方式

1.字面量创建

<script>
    var stu1 = {
        name: "li",
        age: 18,
        sayHallo: function() {
            console.log(this.name);
        }
    }
</script>

缺点：代码冗余

2.借助内置构造函数创建具体的对象

		var stu1 = new Object();
		        stu1.name = "caicai";
		        stu1.age = 20;
		        stu1.sayHello = function(){
		            console.log(this.name);
		        }

缺点：代码冗余

3.通过工厂函数创建具体的对象

		function createObj(name,age){
		         var obj = new Object();
		             obj.name = name;  
		             obj.age = age;
		             obj.sayHello = function(){    
		                 console.log(obj.name); 
		             }
		             return obj;
		     }
		     var stu1 = createObj("cai",22);
		     var stu2 = createObj("xu",21);

缺点：无法判断对象属于哪一个类型

4.构造函数方式创建

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

		function Person(name,age){  
		            this.name = name;
		            this.age = age;
		            this.sayHello = function(){
		                console.log(this.name);
		            }
		        }
		        var person1=new Person("john1",21);
		        var person2=new Person("john2",22);

构造函数创建对象的4步骤

 1.创建一个新对象
 2.改变this指向，指向这个新对象
3.执行构造函数里的代码，给这个新对象添加属性和方法
4.返回这个新对象

弊端：每个实例调用的方法应该是一致的，但是实际上在生成实例时，各自都创建了自己的方法。消耗了内存。

5.组合创建

属性放到构造函数里，方法放到原型对象上

<script>
    
        function Person(name,age){
            this.name = name;
            this.age = age;
        }
        Person.prototype.sayHello = function(){ //原型方法
            console.log(this.name);//this也是指向实例
        }

        var person1 = new Person("john1",21);
        var person2 = new Person("john2",22);

        console.log(person1.name,person2.name);
    </script>

3.this指向

指导思想：谁调用这个函数或者方法，this就指向谁。

普通函数（this -> window）

<script>
        function foo(){
            console.log(this);
        }
        foo();
</script>

对象方法里this（this -> 对象 ）

<script>
    var obj = {
        age: 21,
        sayHello: function() {
            console.log(this); //obj
        }
    }
    obj.sayHello();
</script>

事件里this（严格模式下：this -> undefined ）

<script>
    btn.onclick = function() {
        console.log(this);
    }
    "use strict"
    function foo() {
        console.log(this); 
    }
    foo(); 	
    window.foo();
</script>

构造函数里this（严格模式下：this -> 实例 ）

<script>
    function Person(name, age) {
        this.name = name;
        this.age = age;
        this.sayHello = function() { 
            console.log(this.name);
        }
    }
    var person = new Person("john", 20);
    console.log(person.name, person.age);
</script>

箭头函数里的this -> 定义时所在环境中的那个this对象

<script>
    //箭头函数1，this指向window
    var obj = {
        age: 21,
        sayHello: () => {
            console.log(this);
        }win
    }
    obj.sayHello();


    //箭头函数2，this指向Object
    var name = "window";
    var obj = {
        name: "aa",
        sayHello: function() {
            console.log(this); 
            setTimeout(() => {
                //setTimeout是window内置的方法
                console.log(this.name);
            })
        }
    }
    obj.sayHello();
</script>

4.原型对象

原型对象：每个函数都有的一个属性 prototype

原型对象上的属性和方法都能被实例所访问

   <script>
        function Person(){
        }
        //给原型对象添加属性和方法
        Person.prototype.name = "john";
        Person.prototype.age = 20;
        Person.prototype.sayHello = function(){
            console.log(this.name);
        }
        var person1 = new Person();
        var person2 = new Person();
        console.log(person1.sayHello === person2.sayHello);//true
        console.log(person1.name,person2.name);
    </script>  

缺点：解决了多个实例相同的方法指向不一样的问题，但是无法添加自己的属性值

5.原型链

每一个构造函数都有一个原型对象，每一个原型对象上都有一个指向构造函数的指针（constructor），每一个实例上有指向这个原型对象的内部指针__proto__，原型对象上的属性和方法能被实例所访问到

 <script>
        function FnA(){
            this.a = "aa";
        }
        function FnB(){
            this.b = "bb";
        }
        function FnC(){
            this.c = "cc";
        }
      FnB.prototype = new FnC();  //让FnB原型对象具有c属性
        var fb = new FnB();
        console.log(fb.c);//cc
        FnA.prototype = new FnB();//让FnA原型对象里具有b属性
        var fa = new FnA();
        console.log(fa.b);
        console.log(fa.c);