javascript 原型上的操做区别

时间 2019-11-24
原文原文链接
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <script type="text/javascript" src="../jquery.js"></script>
    <script>
        
        var Book = function (id, name, price)
        {
            this.id = id;
            this.name = name;
            this.price = price;
        }


        var Book2 = function (id, name, price)
        {
            this.id = id;
            this.name = name;
            this.price = price;
        }


        // 在原型的基础上
        Book.prototype.display = function () {
            console.log(this.name);
        }


        // 直接替换原型对象
        Book2.prototype = {
            display: function ()
            {
                console.log(this.name);
            }
        }


        var _Book = new Book(1, 'javascript', 12);
        var _Book2 = new Book2(1, 'javascript', 12);

        console.log(_Book);
        console.log(_Book2);



        var Test = function () { };
        var _Test = new Test();
        console.log(_Test);


        // 若是在对象的原型上添加属性和方法, 那么他的constructor属性会指向到当前对象,
        console.log(_Book.constructor == Book);    // true
        console.log(_Book.constructor == Object);  // false;
        // 若是在直接替换原型对象,那么他的constructor属性会指向最原始的对象.
        console.log(_Book2.constructor == Object);  // true;
        console.log(_Test.constructor == Test);    // true;

        // 测试某个属性是不是自拥有的
        console.log("constructor" in _Test);  // true;
        console.log("constructor" in _Book2); // true;
        console.log(_Test.hasOwnProperty('constructor'));  // false 不是自拥有的属性,这个是继承过来的.
        console.log(_Book.hasOwnProperty('constructor'));  // false




        /*
            知识点总结:
            _Book:
            constructor:(id, name, price)
            display:()
            __proto__:Object


            _Book2:
            display: ()
            __proto__: Object


            1  在原型上追加方法时, 对象的构造函数是存在的,若是是替换原型对象,那么就会无构造函数,
            2  若是在原型上追加方法,那么他的构造函数是指向本身的,经过_Book,_Test的测试看到,
               若是直接替换原型对象,那么他的构造函数是指向object,
                
        */


    </script>
</head>
<body>

</body>
</html>
javascript 原型上的操做 区别

javascript 原型上的操做区别
