day22 JS之面向对象

一、面向对象

                面向过程   C         注重问题的解决

                面向对象 java 完成对真实世界的模拟,把一个对象的共同特点抽离出现，有了

                所的‘属性’和方法 class

        js并不是一个真正的面向对象的语言

        js在模拟面向对象

二、其他对象

        所有的实例化对象都共享方法

        var arr1 = new Array()
        var arr2 = new Array()

        // 所有实例化的对象都共享方法
        console.log(arr1.forEach == arr2.forEach);
        // true 

        //母子关系  constructor 构造器  arr1是由Array生出来的
        console.log(arr1.constructor);

        console.log(arr1);

三、工厂模式

缺点：创建出来的对象跟函数没有任何关系

           创建出来的对象之间的方法不共享

        function dog(type,age) {
            // 原材料
            const obj = {}
            // 加工
            obj.type = type 
            obj.age = age
            obj.say = function () {
                console.log('有一只' + obj.age +'岁的'+ obj.type);
            }
            // 出厂
            return obj
        }

        const dog1 = dog('柯基',3)

 四、new

new 做了什么

        给函数添加了返回值,返回了一个对象

        把this指向了这个对象 

        创建了一个对象 

        // function ff() {
        //     const obj = {}
        //     this -> obj
        //     return obj
        // }

        function fn() {
            console.log(this);
            console.log(666); 
        }

        var res = fn()    // this指向window
        console.log(res); // 函数没有返回值 undefined


        var res2 = new fn() // this指向了对象
        console.log(res2); // 返回了这个对象

       function Dog(type,age) {
            // const obj = {}
            // this -> obj
            this.type = type 
            this.age = age
            this.say = function () {
                console.log('有一只' + this.age +'岁的'+ this.type);
            }
            // return obj
        }

        const dog1 = new Dog('柯基',3) 
        const dog2 = new Dog('二哈',2)       
        console.log(dog1);

        console.log(dog1.constructor); // Dog

        console.log(dog1.say == dog2.say); // false

        任何一个函数都有可能成为一个构造函数

        只要有new

                为了区分普通函数和构造函数,js建议构造函数使用大驼峰命名

五、原型对象和原型 

原型：任何一个对象都有原型  __proto__, 也就是这个构造函数

原型对象：任何一个函数都有原型对象,prototype

        给所有的实例化对象提供共用的属性和方法   

js面向对象的发展过程

       1. 工厂模式   创建一个对象,给对象加工(添加属性和方法)，返回这个对象

                             缺点：创建出来的对象和函数没有关系,方法也不共享

       2. new (创建对象,把this指向了这个对象和返回对象都由new完成了) 解决了

            关系问题，方法依然不共享

       3. prototype 原型对象：提供共享的属性和方法

js 面向对象的模拟最终版

        自身拥有的属性和方法写在构造函数中

        共有的属性和方法写在构造函数的原型对象上 

 

       function Fn(type) {
            this.type = type
            // this.age = age 
            // this.say = function () {
            //     console.log('汪');
            // }
        }

        Fn.prototype.species = '狗'
        Fn.prototype.say = function () {
            console.log('汪');
        }

        var dog = new Fn('狗子') 
        console.log(dog); 
        var dog2 = new Fn('柯基') 

        dog.say()

        // 每一个实例化对象都共享say方法
        console.log(dog.say === dog2.say); // true

        // console.log(dog.__proto__); // 指向这个构造函数
        // console.log(dog.constructor); // Fn


        // console.log(dog.prototype);// 报错 只有函数才有

六、面向对象梳理

        // 面向对象的语言：侧重于'类'的概念 -- 分类

        //   '狗类'  构造器  妈

        //    二哈 ， 柯基 具体的对象 儿子

        // 类用于创建对象

        var obj = {}
        obj.species = '狗'   
        obj.name = '二哈'     
        obj.age = 3    
        obj.say = function () {
            console.log('hello world');
        }

        // 工厂模式
        function dog(type , age) {
            var obj = {}
            obj.species = '狗' 
            obj.name = type
            obj.age = age
            obj.say = function () {
                console.log('汪');
            }

            return obj
        }

        function cat(type , age) {
            var obj = {}
            obj.species = '猫'
            obj.name = type
            obj.age = age
            obj.say = function () {
                console.log('喵');
            }

            return obj
        }


        // 函数的返回值是一个对象

       function person(type , age) {
            // var obj = {}
            // this -> obj
            this.species = '人'
            this.type = type 
            this.age = age 
            this.say = function () {
                console.log('我是人');                
            }
            // return obj 
        }

        // new 干了三件事情                                  
        //      创建对象
        //      this -> 对象
        //      返回了这个对象 
        var fangZong = new person('男人' , 38)
        var keZong = new person('男人' , 18)
        console.log(fangZong.say == keZong.say); // false
        console.log(fangZong.species == keZong.species); // true

      prototype 原型对象 --- 解决属性和方法共享的问题

        // prototype 原型对象 --- 解决属性和方法共享的问题

        function person(type , age) {
            // this.species = '人'
            this.type = type 
            this.age = age 
            this.speak = function () {  
                console.log(this.age);
            }
            // this.say = function () {
            //     console.log('我是人');                
            // }
        }
        person.prototype.species = '人'
        person.prototype.say = function () {
            console.log('我是人');
        }
        var fangZong = new person('男人' , 38)
        var keZong = new person('男人' , 18)
        console.log(fangZong.say == keZong.say); // true
        console.log(fangZong.species == keZong.species); // true

        console.log(fangZong.constructor); //   f person

        var arr = new Array()
        console.log(arr.constructor); // f array