原型对象(上)

一、引入

1、JS是一门脚本语言，解释型语言、弱类型语言、基于对象的语言、动态型语言

2、继承（面向对象有三个特性：封装、继承、多态  ）是指类与类之间的关系，JS中没有类的概念，JS中有构造函数的概念，是可以继承的，是基于原型

3、创建对象的三种方法：字面量、系统方法构造函数、自定义构造函数

   <script>
    //字面量
    var per1={
        name:"刘备",
        age:25,
        show:function(){
            console.log("双股剑");
        }
    }
    //系统方法构造函数创建对象
    var per2=new Object;
    per2.name="张飞";
    per2.age=23;
    per2.show=function(){
        console.log("丈八蛇矛");
    }
    //自定义构造函数创建对象
    function Person(name,age){
        this.name=name;
        this.age=age;
        this.show=function(){
            console.log("青龙偃月刀");
        }
    }
    var per3=new Person("关羽",24)
    </script>

4、工厂模式和自定义构造函数的区别

• 共同点：都是函数、都可以创建对象、都可以传入参数
• 工厂模式：函数名小写，有new，有返回值，new之后的对象是当前的对象，对象创建，直接调用函数
• 自定义构造函数：函数名大写（首字母），没有new，没有返回值，this是当前对象，对象创建，通过new出来（实例化对象）

   <script>
    //自定义构造函数创建对象
    function Person(name,age){
        this.name=name;
        this.age=age;
        this.show=function(){
            console.log("青龙偃月刀");
        }
    }
    var per1=new Person("关羽",24);
    //工厂模式创建对象
    function creatObj(name,age){
            var obj= new Object;
            obj.name=name;
            obj.age=age;
            obj.show=function（ ）{
                console.log("青釭剑");
            }
            return obj;
    }
    var per2=new creatObj("赵云",29);

5、构造函数和实例函数之间的关系

• 注意：使用console.dir可以查看结构
• 实例对象是通过构造函数来创建的，创建的过程叫实例化
• 实例化对象会指向自己的构造函数（暂时理解）
• 判断对象是不是这个数据类型，可以通过构造器的方法（实例对象.构造器==构造器名字）或者instanceof（对象 instanceof 构造函数名字 ），推荐后者

   <script>
    function Person(name,age){
        this.name=name;
        this.age=age;
        this.show=function(){
            console.log("青龙偃月刀");
        }
    }
    var per=new Person("关羽",24);
    //查看结构---看下图
    console.dir(Person);//构造函数
    console.dir(per);//实例对象
    //判断对象是不是这个数据类型
    //方法一:
    console.log(per instanceof Person);//true
    //方法二:
    console.log(per.constructor==Person);//true
    </script>

6、构造函数创建对象带来的问题

• 产生多个内存空间

    <script>
        //创建的两个实例对象的方法虽然相同,但是并不相等,如果创建的对象过多,就会使占用过多内存
        function Person(name,age){
            this.mame=name;
            this.age=age;
            this.eat=function(){
                console.log("吃饭");
            }
        }
        var per1=new Person("李白",44);
        var per2=new Person("杜甫",50);
        console.log(per1.eat==per2.eat);//false
    </script>

• 可以通过使用命名函数方法解决，但是可能会有变量冲突

    <script>
        //通过使用命名函数方法解决，但是可能会有变量冲突-----最好引入原型
        function Person(name,age){
            this.mame=name;
            this.age=age;
            this.eat=myEat;
        }
        function myEat(){
            console.log("吃饭");
        }
        var per1=new Person("李白",44);
        var per2=new Person("杜甫",50);
        console.log(per1.eat==per2.eat);//true
    </script>

• 所以最好引入原型来解决

二、原型对象

1、构造函数创建函数带来的问题，可以通过原型的方法解决-----原型的作用之一：可以实现数据共享，节省内存空间

2、通过原型来添加方法：构造函数.prototype.方法名=一个函数

   <script>
    function Person(name,age){
        this.mame=name;
        this.age=age;
    }
    Person.prototype.eat=function(){
            console.log("吃饭");
        }
    var per1=new Person("李白",44);
    var per2=new Person("杜甫",50);
    console.log(per1.eat==per2.eat);//true
    </script>

3、案例：点击按钮改变div样式（使用原型的方法）

4、什么是原型？

• 实例对象中有个属性，__proto__，也是对象，叫原型，不是标准的属性，在IE8中可能不支持，主要给是给浏览器使用的
• 构造函数中有个属性，prototype，也是对象，叫原型，是标准属性，主要给程序开发人员使用
• 所以原型就是__proto__或者prototype，都是原型对象

5、构造函数、原型对象、实例对象之间的关系（画图）

• 构造函数可以实例化对象，产生实例对象
• 构造函数中有一个属性，prototype，是构造函数的原型对象
• 构造函数的对象中有一个构造器（constructor）指向构造函数本身
• 实例对象中的原型对象，__proto__，指向的是该构造函数的原型对象（prototype）
• 构造函数的原型对象（prototype）中的方法是可以被实例对象直接访问的

  <script>
        //自定义构造函数
        function Person(name,age){
            this.age=age;
            this.name=name;
        }
        //通过原型添加方法
        Person.prototype.sayHi=function(){
            console.log("hello");
        }
        //实例化对象
        per=new Person("小明",20);
        console.dir(Person);
        console.dir(per);
    </script>

6、利用原型共享数据

• 需要共享的数据可以写在原型中，可以是属性或者方法
• 不影响共享的数据写在构造函数中，需要共享的数据写在原型中

    <script>
        //自定义构造函数
        function Student(name,age){
            this.name=name;
            this.age=age;
        }
        //通过原型添加相同的数据,实现共享
        Student.prototype.height="180cm";
        Student.prototype.weight="100kg";
        Student.prototype.sex="都是男的";
        
        //实例化对象
        stu1=new Student("关羽",30);
        stu2=new Student("刘备",31);
        stu3=new Student("张飞",29);
        console.log(stu1.height);//180cm
        console.log(stu2.weight);//100kg
        console.log(stu3.sex);//都是男的
    </script>

7、简单的原型写法

• 格式：构造函数.prototype={  属性或者方法  }
• 但是这种写法需要手动修改构造器的指向----constructor:构造函数名

   <script>
        //自定义构造函数
        function Student(name,age){
            this.name=name;
            this.age=age;
        }
        //通过原型添加相同的数据,实现共享
        //简单的原型写法(放进一个对象里)
        //但是必须要手动修改构造器的指向
        Student.prototype={
            constructor:Student,
            height:"180cm",
            weight:"100kg",
            sex:"都是男的"
        }
        
        //实例化对象
        stu1=new Student("关羽",30);
        stu2=new Student("刘备",31);
        stu3=new Student("张飞",29);
        console.log(stu1.height);//180cm
        console.log(stu2.weight);//100kg
        console.log(stu3.sex);//都是男的}
    </script>

8、原型中的方法是可以互相进行访问的

   <script>
        //自定义构造函数
        function Student(name,age){
            this.name=name;
            this.age=age;
        }
        //通过原型添加方法
        Student.prototype.eat=function(){
            console.log("吃饭");
        };
        Student.prototype.sleep=function(){
            console.log("睡觉");
            this.eat();//添加eat方法
        };
        Student.prototype.play=function(){
            console.log("玩球");
            this.sleep();//添加sleep方法
        };
        //实例化对象
        var per=new Student("小明",20);
        per.eat();//吃饭
        per.sleep();//睡觉 吃饭
        per.play();//玩球 睡觉 吃饭
    </script>

9、原型的层层搜索

• 实例对象使用的属性或者方法，先在实例对象中找，找到了则直接使用
• 找不到则去实例对象的__proto__指向的原型对象prototype中找，找到了使用
• 找不到则报错

   <script>
        //自定义构造函数
        function Student(name,age){
            this.name=name;
            this.age=age;
            this.eat=function(){
               console.log("构造函数中的吃饭");
            }
        }
        //通过原型添加方法
        Student.prototype.eat=function(){
            console.log("原型中的吃饭");
        };
        //实例化对象
        var per=new Student("小明",20);
        per.eat();//构造函数中的吃饭
        //说明实例对象调用方法时,首先在构造函数中寻找这个方法,没有的话,再去原型__proto__去找这个方法
    </script>

10、为系统内置对象添加原型方法（相当于改变源码）

    <script>
    //例1：字符串中添加一个倒序字符串的方法
    String.prototype.myReverse=function(){
        for(var i=this.length-1;i>=0;i--){
           console.log(str[i]);
        }
    };
    var str="abcd123";
    str.myReverse();//3 2 1 d c b a
    //例2：数组内置对象添加一个方法sayHi
    Array.prototype.sayHi=function(){
        console.log("猴赛雷！！！")
    };
    var arr=[1,2,3];
    arr.sayHi();//猴赛雷！！！
    </script>

11、把局部变量变成全局变量------把局部变量给window就可以了

   <script>
        (function(){
            var num=10;
            //js是一门动态类型的原因，对象没有属性，点了就有了
            window.num=num;
        })();
        console.log(num);//10
        //结论：把局部变量给Window就可以变成全局变量
    </script>

12、案例：随机小方块（相当于贪吃蛇案例的食物）

    <div class="map" style=" 800px;height: 800px;background: #ccc;position: relative;"></div>
    <script>
    //产生随机对象的
    (function (window){
        //产生随机数的构造函数
        function Random(){

        }
        //在原型中添加方法
        Random.prototype.getRandom=function(min,max){
            return Math.floor(Math.random()*(max-min)+min);
        };
        //把random对象暴露给顶级对象window---->外部可以直接使用这个对象
        window.Random=new Random();//直接示例化对象
    })(window);
    //产生小方块对象
    (function(window){
        //选择器的方法获取元素对象
        var map=document.querySelector(".map");
        //小方块的构造函数
        function Food(width,height,color){
            //默认的小方块的高和宽
            this.width=width||20;
            this.height=height||20;
            //横坐标和纵坐标
            this.x=0;
            this.y=0;
            //小方块的背景颜色
            this.color=color;
            //小方块的元素
            this.element=document.createElement("div");
        }
        //初始化小方块的显示和效果及位置---显示在地图上
        Food.prototype.init=function(map){
            //设置小方块的样式
            var div=this.element;
            div.style.position="absolute";
            div.style.width=this.width+"px";
            div.style.height=this.height+"px";
            div.style.backgroundColor=this.color;
            //把小方块加到地图中
            map.appendChild(div);
            this.render(map);
        };
        //产生随机位置
        Food.prototype.render=function(map){
            //随机产生横坐标
            var x=Random.getRandom(0,map.offsetWidth/this.width)*this.width;
            var y=Random.getRandom(0,map.offsetHeight/this.height)*this.height;
            this.x=x;
            this.y=y;
            var div=this.element;
            div.style.left=this.x+"px";
            div.style.top=this.y+"px";
        };
        var fd=new Food(20,20,"red");
        fd.init(map);
        console.log(fd.x+"========"+fd.y);
    })(window);
    </script>