重点--原型对象

2019-06-24 本文已影响0人潘肚饿兵哥哥

    //每一个函数都有自己的prototype
    function Person(){
                    
    }
    
    function MyClass(){
                    
    }
    
    console.log(Person.prototype);
    console.log(MyClass.prototype);
    console.log(Person.prototype == MyClass.prototype);
返回值：

image.png

function MyClass(){
                    
    }
    
    var mc = new MyClass();
    var mc2 = new MyClass();
    var mc3 = new MyClass();
    
    
    console.log(mc.__proto__ == MyClass.prototype);
    console.log(mc2.__proto__ == MyClass.prototype);

image.png

$\color{rgba(254, 67, 101, .8)}{如果函数作为普通函数调用prototype没有任何作用}$
$\color{rgba(254, 67, 101, .8)}{当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性}$
$\color{rgba(254, 67, 101, .8)}{指向该构造函数的原型对象，我们可以通过}$ __Proto__ $\color{rgba(254, 67, 101, .8)}{来访问该属性}$

image.png

$\color{rgba(254, 67, 101, .8)}{这些mc都是MyClass对象的实例，都有一个隐含属性指向原型对象}$
$\color{rgba(254, 67, 101, .8)}{原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象}$

$\color{rgba(254, 67, 101, .8)}{我们可以将对象中共有的内容，统一设置到原型对象中。}$

//向MyClass原型中添加属性a
    
    function MyClass(){
                    
    }
    
    //向MyClass原型中添加属性a
    MyClass.prototype.a = 123;
    
    var mc = new MyClass();
    var mc2 = new MyClass();
    
    console.log(mc.a);
    console.log(mc2.a); 
返回值：

image.png

$\color{rgba(254, 67, 101, .8)}{给prototype.a 赋值 123;}$
$\color{rgba(254, 67, 101, .8)}{此时mc里并没有a}$
$\color{rgba(254, 67, 101, .8)}{但是mc.a的结果是123}$
$\color{rgba(254, 67, 101, .8)}{这里有点绕，我感觉它就是在赋值}$

$\color{rgba(254, 67, 101, .8)}{当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用}$
$\color{rgba(254, 67, 101, .8)}{如果没有则会去原型对象中寻找，如果找到则直接使用}$

    function MyClass(){
                    
    }
    
    MyClass.prototype.a = 123;
    
    var mc = new MyClass();
    var mc2 = new MyClass();
    
    //向mc中添加属性a
    mc.a = "我是mc中的a";
    console.log(mc.a);
    console.log(mc2.a);

image.png

    function MyClass(){
                    
    }       
    
    //向mc中添加方法sayHello
    MyClass.prototype.sayHello = function(){
        alert("hello");
    }
    
    var mc = new MyClass();
    mc.sayHello();
    
    //此时MyClass.prototype.sayHello 中有了方法sayHello
    //mc中是没有此方法的,但是调mc.sayHello();会得到返回值  hello
    //sayHello方法只有一个,但是所有对象都可以访问到
    //这样就不会污染全局作用域,因为他不在全局作用域里,在属性里

源码：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            /*
             * 原型 prototype
             * 
             *  我们所创建的每一个函数（函数也是对象），解析器都会向函数中添加一个属性prototype
             *      这个属性对应着一个对象，这个对象就是我们所谓的原型对象
             *      它这个属性对应的原型对象在内存地址中有自己的地址
             * 
             *  如果函数作为普通函数调用prototype没有任何作用
             *  当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，
             *      指向该构造函数的原型对象，我们可以通过__proto__来访问该属性
             * 
             *  原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，
             *      我们可以将对象中共有的内容，统一设置到原型对象中。
             * 
             * 当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，
             *  如果没有则会去原型对象中寻找，如果找到则直接使用
             * 
             * 以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，
             *  这样不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了
             */
            
            function MyClass(){
                
            }
            
            //向MyClass的原型中添加属性a
            MyClass.prototype.a = 123;
            
            //向MyClass的原型中添加一个方法
            MyClass.prototype.sayHello = function(){
                alert("hello");
            };
            
            var mc = new MyClass();
            
            var mc2 = new MyClass();
            
            //console.log(MyClass.prototype);
            //console.log(mc2.__proto__ == MyClass.prototype);
            
            //向mc中添加a属性
            mc.a = "我是mc中的a";
            
            //console.log(mc2.a);
            
            mc.sayHello();
            
            
        </script>
    </head>
    <body>
    </body>
</html>

重点--原型对象

猜你喜欢

热点阅读