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. php 关于经纬度距离计算方法 成功版

    1.PHP实现通过经纬度计算距离 单位为公里 function getdistance($lng1,$lat1,$lng2,$lat2)//根据经纬度计算距离 { //将角度转为狐度  $radLat ...

  2. python socket+tcp三次握手四次撒手学习+wireshark抓包

    Python代码: server: #!/usr/bin/python # -*- coding: UTF-8 -*- # 文件名:server.py import socket # 导入 socke ...

  3. 防火墙上开放Oracle服务端口1521的方法

    近来由于工作需要,在Windows XP平台上安装了Oracle9i数据库作为测试之用,一切正常.但当客户机连接服务器时却总是超时,我首先想到了防火墙,当我打开1521端口时,连接操作仍然失败.我又怀 ...

  4. 从零开始——PowerShell应用入门(全例子入门讲解)

    学习一门技术,不止要会,还要善用,例子就是带你快速入门的最佳利器.本文就是要用例子,不,大量的例子来带你走进PowerShell应用世界. 本文主要介绍一些PowerShell入门的基础知识,对技术小 ...

  5. Python有哪些好用的语言翻译方法

    最近有个需求,要将几万条数据从日语翻译成中文.因为数据的获取和处理用的是python代码,所以想先尝试翻译部分也用python实现. 目前网上查到的翻译方法有百度.有道云以及谷歌翻译,下面会对这三个方 ...

  6. 如何通过JS实现简单抖动效果

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. python学习第三个坑

    ##########################python 第三章 ################################这一章呢,主要是文件的操作,还有涉及到函数的一部分. PS:整 ...

  8. JavaSE教程-04Java中循环语句for,while,do···while-练习

    0.实现打印50遍的"我爱你" 1.请在控制台输出数据1-10 2.请在控制台输出数据10-1 3.求出1-10之间数据之和 4.求出1-100之间能够被3整除的所有数的和 前四题 ...

  9. Webpack新手入门教程(学习笔记)

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 30.0px Helvetica; color: #000000 } ...

  10. vue使用Axios做ajax请求

    vue2.0之后,就不再对vue-resource更新,而是推荐使用axios 1. 安装 axios $ npm install axios 或 $ bower install axios 2. 在 ...