构造函数和原型

160 阅读2分钟

一.构造函数如何创建对象

1.创建对象三种方式
(1)字面量创建
(2)使用Object对象new一个
(3)自定义构造函数
前两种不必多少这里主要说构造函数

 <script>
        function Fun(uname, age) {
            //注意构造函数的函数名首字母要大写
            this.uname = uname
            this.age = age
            //这里的this指向你实例的对象
        }
        var obj = new Fun("天才小熊猫",18);//使用new来创建新对象
        console.log(obj);
    </script>

二.静态成员和实例成员

静态成员:在构造函数本身上添加的成员叫静态成员,只能由构造函数本身来访问
动态成员:在构造函数内部创建的对象成员叫实例成员,只能由实例化的对象来访问

三.原型的作用

1.构造函数原型对象
构造函数的问题:存在内存浪费的问题

<script>
  function Fun(uname, age) {
            //注意构造函数的函数名首字母要大写
            this.uname = unam
            this.age = age
            this.sing = function () {
                console.log("唱");
            }
        }
        var obj_1 = new Fun("天才小熊猫", 18);//使用new来开辟一块新的空间来存放构造函数
        var obj_2 = new Fun("猫", 17)
        console.log(obj_1.sing === obj_2.sing);//返回false,构造函数中实例出的对象里方法存储的位置是不一样的
    </script>

我们如何解决呢??
2.这就要用到我们构造函数原型prototype
(1)js语法规定,每一个构造函数都有一个prototype属性,指向另一个对象。注意这个prototype就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有。
(2)构造函数通过原型所分配的方法(函数)是所有对象所共享的 (3)我们可以把一些不变的方法直接定义到prototype对象上,这样所有对象的实例就可以共享这些方法

 <script>
        function Fun(uname, age) {
            //注意构造函数的函数名首字母要大写
            this.uname = uname
            this.age = age
            /* 
            this.sing = function () {
                console.log("唱");
            }
            */
        }
        Fun.prototype.sing = function () {
            console.log("唱");
        }//这样就不会浪费内存空间,实现了方法共享
        console.dir(Fun);
        var obj_1 = new Fun("天才小熊猫", 18);//使用new来开辟一块新的空间来存放构造函数
        var obj_2 = new Fun("猫", 17)
    </script>

原型是什么
一个对象,我们也称为prototype原型对象
原型的主要作用
共享方法 3.对象原型__proto__ 对象都会有一个属性__proto__指向构造函数的prototype原型对象,之所以我们对象可以使用构造函数prototype原型对象的属性和方法,就是因为对象有__proto__原型的存在
对象身上的__proto__指向了构造函数的prototype,它们两个是等价的
constructor构造函数
对象原型(proto)和构造函数(prototype)原型对象里面都有一个constructor属性,这个constructor指回我们构造函数本身

四.访问对象成员的规则

1.首先先看实例对象身上有这个属性或方法,如果有就执行这个对象上的属性或方法
2.如果没有这个方法,因为有__proto__的存在,就去构造函数原型对象prototype身上去查找这个方法,如果有就执行
3.如果没有就通过这个构造函数中的prototype里的__proto__指向Object的prototype 4.如果Object.prototype没有该方法,则为null返回undefined

五.ES5新增的方法