JavaScript 定义 类
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 定义 类的更多相关文章
- Javascript定义类(class)的三种方法
将近20年前,Javascript诞生的时候,只是一种简单的网页脚本语言.如果你忘了填写用户名,它就跳出一个警告. 如今,它变得几乎无所不能,从前端到后端,有着各种匪夷所思的用途.程序员用它完成越来越 ...
- [转]Javascript定义类的三种方法
作者: 阮一峰 原文地址:http://www.ruanyifeng.com/blog/2012/07/three_ways_to_define_a_javascript_class.html 将近2 ...
- javascript 定义类(转载)
Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的extend或冒号,它也没有用来支持虚函数的virtual,不过,Javascript是一门 ...
- javascript定义类和类的实现
首先说说类,在一个类里我们会有以下的几个特征: 1. 公有方法 2. 私有方法 3. 属性 4. 私有变量 5. 析构函数 我们直接看一个例子: /***定义类***/ var Class = fun ...
- JavaScript 定义类的最佳写法——完整支持面向对象(封装、继承、多态),兼容所有浏览器,支持用JSDuck生成文档
作者: zyl910 [TOC] 一.缘由 由于在ES6之前,JavaScript中没有定义类(class)语法.导致大家用各种五花八门的办法来定义类,代码风格不统一.而且对于模拟面向对象的三大支柱& ...
- javascript定义类的方法总结
1.构造函数法 类是对象的模板,定义了对象共有的方法属性数据 等,在javascript中一个函数就是一个对象,也可以看做一个类的构造方法. 所以我们可以像以下方式定义类: //1.经典的构造方法 Q ...
- 我所了解的关于JavaScript定义类和对象的几种方式
原文:http://www.cnblogs.com/hongru/archive/2010/11/08/1871359.html 在说这个话题之前,我想先说几句题外话:最近偶然碰到有朋友问我“hois ...
- JavaScript定义类的几种方式
提起面向对象我们就能想到类,对象,封装,继承,多态.在<javaScript高级程序设计>(人民邮电出版社,曹力.张欣译.英文名字是:Professional JavaScript for ...
- JavaScript定义类与对象的一些方法
最近偶然碰到有朋友问我"hoisting"的问题.即在js里所有变量的声明都是置顶的,而赋值则是在之后发生的.可以看看这个例子: 1 var a = 'global'; 2 (fu ...
随机推荐
- HTTP 和 HTTPS
一.HTTP协议 最近看了一些网络通信方面的书籍,研究了一下 HTTP 和 TCP/IP,有了一些新的收获和理解,在这里做个归纳和总结. (1)什么是HTTP协议 HTTP (HyperText Tr ...
- 浅谈MVC异常处理
在日常开发中,我们会去捕捉很多的异常,来进行处理,通常我们的方法就是,在需要进行异常处理的地方加上 try catch 块,但是,如果需要异常处理的地方很多,那么,就会频繁的去写try catch 块 ...
- C#基础篇--面向对象(类与对象)
1.类是什么? 类就相当于模板,就是把同一类的事物的共同特征进行的抽象. 类的创建和说明: 类是先根据一些具体的对象(实体的东西)来抽象出来的共同的特性,然后用代码来表示. 在类中,用数据表示事物的 ...
- .net开源权限管理系统
有业务请加QQ 245747009 源码地址:http://git.oschina.net/sunzewei/EIP 一.更新记录1.更新日期:2017-02-24 00:00:002.更新内容: 版 ...
- 简化布隆过滤器——BitMap
简化布隆过滤器--BitMap 前言 前段开发项目试就发现,一部分的代码实现存在着一些性能上的隐患.但当时忙于赶进度和由于卡发中的不稳定因素,想了许多解决方案也没有机会实施.最近,正好趁个机会进行一系 ...
- 高性能迷你React框架anu在低版本IE的实践
理想是丰满的,现实是骨感的,react早期的版本虽然号称支持IE8,但是页面总会不自觉切换到奇异模式下,导致报错.因此必须让react连IE6,7都支持,这才是最安全.但React本身并不支持IE6, ...
- datatables 学习笔记1 基础篇
本文共3部分:基本使用|遇到的问题|属性表 1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ...
- socket套接字编程
一.概述 1.socket是一种进程间通信方式,既可以用于一台机器,也可以用于网络.常用语C/S模型. 2.可以跨越Windows和Linux操作系统,可以跨越不同语言. 3.注意网络字节序和主机字节 ...
- 执行ANT JAVA三种方式
1. 命令行 <target name="reporttoexcel" depends="report"> <exec executable= ...
- javascript中event.clientX和event.clientY用法的注意事项
今天做项目用到了event.clientX和event.clientY,给元素定位,用定位的时候,让top和left等于事件元素的的坐标 <!DOCTYPE html> <html& ...