constructor prototype 练习（实录三）

最新推荐文章于 2024-10-01 20:12:28 发布

churanlu1875

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量64

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3427060/blog/1475509

版权

constructor prototype写法和优缺点 http://javascript.ruanyifeng.com/oop/prototype.html

<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>My Todo App</title>
    <style>
    
    </style>
    <script>
    //一个简单的构造函数
    function cat (name, color){
        this.name = name;
        this.color = color;
    }

    var cat1 = new cat('大毛', '黑色')
    console.log(cat1.name);
    console.log(cat1.color);

    /*暴露构造函数缺点 
    *它们的meow方法是不一样的，就是说每新建一个实例，就会新建一个meow方法。
    *这既没有必要，又浪费系统资源，因为所有meow方法都是同样的行为，完全应该共享。
    */
    function dage (name, color) {
        this.name = name;
        this.color = color;
        this.meow = function(){
            //console.log( 'mew, mew....')
            alert('好')
        }
    }

    var dage1 = new dage('小白','白色');
    var dage2 = new dage('小灰','灰色');
    //console.log(dage1.meow());
    //console.log(dage2.meow());
    console.log(dage1.meow===dage2.meow);

    /* 原型方法的使用 弥补上述缺点
    * 原型对象上的所有属性和方法，都能被派生对象共享。这就是 JavaScript 继承机制的基本设计。
    *原型对象的属性不是实例对象自身的属性。只要修改原型对象，变动就立刻会体现在所有实例对象上。
    */
    function Animal(name) {
        this.name = name;
    }
    //Animal.prototype.color = 'white';
    Animal.prototype = {
        //color = 'white',
        color: 'white',
        walk: function(){
            console.warn(this.name + 'is walking')
        }

    }

    var tiger = new Animal('Amao')
    var Eelephant = new Animal('Asa')
    //console.log(tiger.color)
    //console.log(Eelephant.color)
    console.log(tiger.color===Eelephant.color);
    tiger.walk()

    </script>
</head>
<body>
    <button id='showwap'>点我</button>

</body>
</html>

转载于:https://my.oschina.net/u/3427060/blog/1475509