JavaScript 定义 类

一 构建类的原则

构造函数 等于 原型的constructor

    //构造函数
    function Hero(name,skill){
        this.name = name;
        this.skill = skill;
    }
    //原型
    Hero.prototype;

    //构造函数 === 原型的constructor
    Hero === Hero.prototype.constructor;    //=>true

    //实例均继承原型

二构建类的方法:

1.直接使用构造方法

该方法创建实例会将内容给每个类都创建一份

//实例属性方法都声明在构造器里
function Hero(name,skill){
    this.name = name;
    this.skill = skill;
    this.sayHello = function(){
        console.log(this.name + ";" + this.skill);
    }
}
//类静态常量
Hero.common = '都有特别的事迹';
//类静态方法
Hero.doSomething = function(){
    console.log('doSomething');
}
var saber = new Hero ('Saber','Excalibur');
saber.sayHello();

var archer = new Hero('Archer','Unlimit Blade Work');
archer.sayHello();

//此处为每个对象都拷贝了一份sayHello 方法 会浪费内存空间
saber.sayHello == archer.sayHello;//=>false

2.优化构造器方法--将方法函数移到构造器的prototype

  • 每个实例都会有一个__proto__属性指向构造函数的prototype
  • 这样每个实例在当前找不到方法后会到prototype寻找该方法
  • 能避免之前出现的拷贝多个方法的情况

2.1扩展prototype

//实例属性方法都声明在构造器里
function Hero(name,skill){
    this.name = name;
    this.skill = skill;
}
Hero.prototype.sayHello = function(){
    console.log(this.name + ";" + this.skill);
}

//类静态常量
Hero.common = '都有特别的事迹';
//类静态方法
Hero.doSomething = function(){
    console.log('doSomething');
}
var saber = new Hero ('Saber','Excalibur');
saber.sayHello();

var archer = new Hero('Archer','Unlimit Blade Work');
archer.sayHello();

saber.sayHello == archer.sayHello;//=>true
    

2.2重写prototype

//实例属性方法都声明在构造器里
function Hero(name,skill){
    this.name = name;
    this.skill = skill;
}

Hero.prototype = {
    //保持 构造函数 等于 原型的constructor
    constructor:Hero,
    sayHello:function(){
        console.log(this.name + ";" + this.skill);
    }
}

//类静态常量
Hero.common = '都有特别的事迹';
//类静态方法
Hero.doSomething = function(){
    console.log('doSomething');
}

JavaScript 定义 类的更多相关文章

  1. Javascript定义类(class)的三种方法

    将近20年前,Javascript诞生的时候,只是一种简单的网页脚本语言.如果你忘了填写用户名,它就跳出一个警告. 如今,它变得几乎无所不能,从前端到后端,有着各种匪夷所思的用途.程序员用它完成越来越 ...

  2. [转]Javascript定义类的三种方法

    作者: 阮一峰 原文地址:http://www.ruanyifeng.com/blog/2012/07/three_ways_to_define_a_javascript_class.html 将近2 ...

  3. javascript 定义类(转载)

    Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的extend或冒号,它也没有用来支持虚函数的virtual,不过,Javascript是一门 ...

  4. javascript定义类和类的实现

    首先说说类,在一个类里我们会有以下的几个特征: 1. 公有方法 2. 私有方法 3. 属性 4. 私有变量 5. 析构函数 我们直接看一个例子: /***定义类***/ var Class = fun ...

  5. JavaScript 定义类的最佳写法——完整支持面向对象(封装、继承、多态),兼容所有浏览器,支持用JSDuck生成文档

    作者: zyl910 [TOC] 一.缘由 由于在ES6之前,JavaScript中没有定义类(class)语法.导致大家用各种五花八门的办法来定义类,代码风格不统一.而且对于模拟面向对象的三大支柱& ...

  6. javascript定义类的方法总结

    1.构造函数法 类是对象的模板,定义了对象共有的方法属性数据 等,在javascript中一个函数就是一个对象,也可以看做一个类的构造方法. 所以我们可以像以下方式定义类: //1.经典的构造方法 Q ...

  7. 我所了解的关于JavaScript定义类和对象的几种方式

    原文:http://www.cnblogs.com/hongru/archive/2010/11/08/1871359.html 在说这个话题之前,我想先说几句题外话:最近偶然碰到有朋友问我“hois ...

  8. JavaScript定义类的几种方式

    提起面向对象我们就能想到类,对象,封装,继承,多态.在<javaScript高级程序设计>(人民邮电出版社,曹力.张欣译.英文名字是:Professional JavaScript for ...

  9. JavaScript定义类与对象的一些方法

    最近偶然碰到有朋友问我"hoisting"的问题.即在js里所有变量的声明都是置顶的,而赋值则是在之后发生的.可以看看这个例子: 1 var a = 'global'; 2 (fu ...

随机推荐

  1. 13、Java菜单条、菜单、菜单项

    13.Java菜单条.菜单.菜单项 一般用Java做界面时,都得牵涉到菜单条.菜单.菜单项的设计.菜单项放在菜单里,菜单放在菜单条里,且其字体均可设置. 13.1.菜单条(Menubar) Frame ...

  2. root用户不能修改iptable文件

    问题: 需要放通IP 端口  执行: vi /etc/sysconfig/iptables, 添加完成后,wq保存,提示文件只读无法保存!!! 解决步骤: 1.查看文件权限  ls -ld /etc/ ...

  3. ubuntu16.04 开发环境搭建

    1.更换源 sudo gedit /etc/apt/sources.list 2.更新系统 sudo apt-get update sudo apt-get dist-upgrade     3.移动 ...

  4. hdu5950

    hdu5950 题意 \(给出 f_1 , f_2 ,以及递推式 f_n = 2 * f_{n-2} + f_{n-1} + n^4 ,求 f_n (mod=2147493647)\) 推导一下. \ ...

  5. struts2 Unable to load configuration. - bean - jar:file:struts2-core-2.2.3.jar!/struts-default.xml:29:72

    今天启动tomcat的时候发现如下错误记录一下! 从stackoverflow上找到 原因是加入了多个struts2包 删除相同的包即可!!

  6. shiro开发,shiro的环境配置(基于spring+springMVC+redis)

    特别感谢lhacker分享的文章,对我帮助很大 http://www.aiuxian.com/article/p-1913280.html 基本的知识就不在这里讲了,在实战中体会shiro的整体设计理 ...

  7. 判断客户端使用的是安卓还是苹果,然后加载对应的css文件

    <script type="text/javascript" charset="utf-8"> var browser = { versions: ...

  8. 20+行代码使用es5 Object.defineProperty 实现简单的watch功能

    /** * 一个简单的demo 帮助理解defineProperty,只对Object类型参数有效 */ $watch=function(myObject,callback){ function in ...

  9. Idea 常用功能汇总,工作中常用技巧

    1.隐藏没用到的文件 比如 IDEA 的项目配置文件(.iml 和.idea),打开 Settings-File Types, 加入要隐藏的文件后缀.  2.常用技巧 2.1 通过Alt+F8查看变量 ...

  10. Java IO学习笔记五

    管道流 管道流的主要作用是可以进行两个线程间的通讯,分为管道输出流(PipedOutputStream).管道输入流(PipedInputStream),如果想要进行管道输出,则必须要把输出流连在输入 ...