JS高级学习:构造函数/实例对象/原型

对象创建的三种方式：

1.字面量方式
2.调用系统的构造函数
3.自定义构造函数

<script type="text/javascript">
            // 字面量方式
            var per1 = {
                name: "看看",
                age: 20,
                sex: "男",
                eat: function() {
                    console.log("卡卡卡");
                }
            };
            // 调用系统构造函数
            var per2 = new Object();
            per2.name = "加急";
            per2.age = 30;
            per2.sex = "男";
            per2.play = function() {
                console.log("爱妈妈");
            };
            //自定义构造函数
            function Person(name, age, sex) {
                this.name = name;
                this.age = age;
                this.sex = sex;
                this.play = function() {
                    console.log("啊啊女")
                }
            }
            var per3 = new Person("家啊", 30, "男");
            console.log(per3 instanceof Person);
        </script>

创建对象

实例化一个对象，的同时进行初始化

工厂模式和自定义构造函数

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

            function creatObject(name, age) {
                var obj = Object();
                obj.age = age;
                obj.name = name;
                obj.sayMe = function() {
                    console.log("方法");
                }
                return obj;
            }

            // 创建对象----实例化一个对象，的同时进行初始化
            function Person(name, age) {
                this.name = name;
                this.age = age;
                this.sayMe = function() {
                    console.log("方法啊")
                };
            }

构造函数和实例对象的区别

1.实例对象是通过构造函数来创建的---创建的过程叫实例化
2.如何判断对象是不是这个数据类型？

• 1)通过构造器的方式，实例对象.构造器==构造函数的名字
• 2)对象instanceof构造函数的名字
  尽可能的使用第二种方式来识别

通过原型来添加方法,解决数据共享,节省内存空间

        <script type="text/javascript">
            function Person(name, age) {
                this.name = name;
                this.age = age;
            }
            // 通过原型来添加方法,解决数据共享,节省内存空间
            Person.prototype.eat = function() {
                console.log("总成绩按揭");
            }
            var p1 = new Person("安静", 20);
            var p2 = new Person("信息", 30);
            console.log(p1.eat == p2.eat); //true

            console.dir(p1);
            console.dir(p2);
        </script>

原型

• 实例对象中有__proto__这个属性，叫原型，也是一个对象，这个属性是给浏览器使用，不是标准的属性--->__proto__ --->可以叫原型对象
• 构造函数中有prototype这个属性，叫原型，也是一个对象，这个属性是给程序员用的,是标准的属性---> prototype -->可以叫原型对象
  实例对象的__proto__和构造函数中的prototype相等，--->ture
  又因为实例对象是通过构造函数来创建的，构造函数中有原型对象prototype
  实例对象的__proto__指向了构造函数的原型对象prototype
• 原型的作用：共享数据，节省内存空间

三者的关系

• 构造函数可以实例化对象
• 构造函数中有一个属性叫prototype,是构造函数的原型对象
• 构造函数的原型对象（prototype）中有一个constructor构造器，这个构造器指向的就是自己所在的原型对象所在的构造函数
• 实例对象的原型对象（__proto__）指向的是该构造函数的原型对象
• 构造函数的原型对象（prototype）中的方法是可以被实例对象直接访问的

利用原型共享数据

• 什么样子的数据是需要写在原型中？
  需要共享的数据就可以写原型中
• 原型的作用之一：数据共享
• 不需要共享的数据写在构造函数中，
• 原型对象中的方法,可以相互调用
• 实例对象使用的属性或方法，先在实例中查找，找到了则直接使用，找不到则去实例对象的__proto__指向的原型对象prototype中找，找了了则调用，找不到则报错

简单的原型写法

<script type="text/javascript">
            function Student(name, age) {
                this.name = name;
                this.age = age;
            }
            // 简单的原型写法
            Student.prototype = {
                constructor: Student,
                height: "111",
                weight: "55kg",
                stydy: function() {
                    console.log("买奶粉吗");
                }
            };
            var stu = new Student("安监局", 20);
            stu.stydy();
            console.dir(Student);
            console.dir(stu);
            console.log(Student);
        </script>

• 相关代码:
  demo地址