文档章节

constructor prototype 练习 (实录 三)

own1991
 own1991
发布于 2017/07/19 16:31
字数 316
阅读 9
收藏 0

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>

 

© 著作权归作者所有

own1991
粉丝 0
博文 61
码字总数 29561
作品 0
黄浦
私信 提问
Javascript面向对象编程(二):构造函数的继承

这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例。 今天要介绍的是,对象之间的"继承"的五种方法。 比如,现在有一个"动物"对象的构造函数。   functio...

阮一峰
2010/05/23
0
0
js深入之原型及原型链

作者:不洗碗工作室 - 浩小生 文章出处: js深入之原型及原型链 版权归作者所有,转载请注明出处 前言 有关于原型及原型链方面的知识,总能听见身边学习玄学js的同学朋友说起,经过学习讶羽的...

不洗碗工作室
2017/12/01
0
0
《JavaScript启示录》读后笔记

一、原型 每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方法和属性,也就是说将函数当作构造函数来调用的时候(使用new...

zhuzhiou
2014/05/26
213
0
如果再被问到原型和原型链......

求职过程中,经常会被问到关于原型和原型链,就问题本身而言并不难,主要是考察对JavaScript核心概念的理解,但如何能够说明白确实需要认真准备下。 我印象比较深刻的一次,有个面试官出了一...

我是一尾
09/22
0
0
DOM笔记(十二):又谈原型对象

因为之前谢过一篇关于原型对象的笔记:浅谈JavaScript中的原型模式。现在我又重新看到这个话题,对原型有了进一步的理解,所以,又要谈谈原型对象。 一、理解原型对象 创建的每一个函数都有一...

dwqs
2014/12/27
123
0

没有更多内容

加载失败,请刷新页面

加载更多

Mac 下 brew 使用国内的镜像源

## 阿里云## 阿里云 # 替换brew.gitcd "$(brew --repo)"git remote set-url origin https://mirrors.aliyun.com/homebrew/brew.git# 替换homebrew-core.gitcd "$(brew --repo)/Library/......

子枫Eric
19分钟前
3
0
Java 格林威治时间字符串转本地Date对象

//import org.apache.commons.lang.StringUtils; /** * * 功能描述: 格林威治时间字符串转本地时间Date * * @param: [strDate] * @return: java.ut...

SummerGao
20分钟前
5
0
二叉搜索树的第 K 个节点

利用二叉查找树中序遍历有序的特点。 private TreeNode ret;private int cnt = 0;public TreeNode KthNode(TreeNode pRoot, int k) { inOrder(pRoot, k); return ret;}...

Garphy
30分钟前
4
0
调用约定

对于常见的指令集,在指令层面没有所谓的“函数”概念,只有“子程序”概念。子程序是存储在“主程序”之外的一段指令。子程序通过call指令调用,通过ret指令返回。子程序可以使用内存、堆栈...

tommwq
今天
3
0
设计类题目

1. 订单 和 退货单之间有什么关系? 答:退货单是 用 用户提交退货 和 订单生成的 或者 订单和退货单都是一张单子,用一个状态标识 2. 在这种由源头单生成的流程中,第二张单子是怎样生成的?...

杨凯123
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部