JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析


Posted in Javascript onMarch 14, 2020

本文实例讲述了JS中类的静态方法,静态变量,实例方法,实例变量区别与用法。分享给大家供大家参考,具体如下:

1.类的静态方法

先来段代码之后分析

// JS类静态函数
function BaseClass() {
}
// 类添加add函数
BaseClass.add = function() {
  console.log("BaseClass add()方法被调用");
};
// 类方法(类的静态函数)直接调用
// 类名.类方法名
BaseClass.add(); //BaseClass add()方法被调用
var instance = new BaseClass();
// 实例不能调用类方法(即类的静态方法)
//instance.add();

a.类的静态方法通过[类名.类方法名称]赋值;
b.调用时用[类名.类方法名称()]直接调用;
C.类的实例无法调用类的静态函数。
 原因:因在js中function也是对象,即给函数对象添加了一个函数

2.类的静态成员

先来段代码之后分析

// JS类的静态成员变量
function BaseClass(params) {
}
// 类添加静态变量nameTest
BaseClass.nameTest = "jadeshu";
// 类的静态变量直接调用
// 类名.类变量名
console.log(BaseClass.nameTest); // jadeshu
var instance = new BaseClass();
// 实例不能调用类的静态成员变量)
console.log(instance.nameTest);  // undefined

a.类的静态变量通过[类名.类变量名称]赋值;
b.调用时用[类名.类变量名称]直接调用;
C.类的实例调用类的静态变量为undefined。
  -----原因:因在js中function也是对象,即给函数对象添加了一个属性

3.实例方法(两种情况)

I.单个实例的方法

// JS的单个实例方法
function BaseClass() {
}
var instance1 = new BaseClass();
// 单个实例添加成员方法
instance1.add = function (params) {
  console.log("BaseClass类实例的add方法被调用" + params);
};
instance1.add(11222); // BaseClass类实例的add方法被调用11222
var instance2 = new BaseClass();
//instance2.add(); // Error: instance2.add is not a function

II.所有实例创建时都创建了同名的方法

// JS所有实例的共享方法
function BaseClass() {
  // 所有实例创建时都创建了同名的方法
  this.add = function (params) {
    console.log("BaseClass类实例的add方法被调用" + params);
  };
}
var instance1 = new BaseClass();
instance1.add(11); // BaseClass类实例的add方法被调用11
var instance2 = new BaseClass();
//实例1和实例2各有一个add函数的本地方法
instance2.add(22); // BaseClass类实例的add方法被调用22
console.log(instance1.add === instance2.add); // false

方法也是每个实例各存在一个,占用内存,这既没有必要,又浪费系统资源,所以不建议这样添加实例的本地方法,或者在外部定义函数,然后直接赋给一个变量即可,就可以做到所有创建的实例都引用一份代码,但这样做代码不优雅。

// JS所有实例的共享方法
function add(params){
  console.log("BaseClass类实例的add方法被调用" + params);
}
function BaseClass() {
  // 所有实例创建时都创建了同名的方法
  this.add = add;
}
var instance1 = new BaseClass();
instance1.add(11); // BaseClass类实例的add方法被调用11
var instance2 = new BaseClass();
//实例1和实例2则共用add函数的代码
instance2.add(22); // BaseClass类实例的add方法被调用22
console.log(instance1.add === instance2.add); // true

单个实例添加方法建议直接如第一种方法,如果是共享方法就加入prototype属性上[即js中采用原型]。

4.实例变量(两种情况)---即是实例的本地属性

I.单个实例的变量

// JS的单个实例成员变量
function BaseClass() {
}
var instance1 = new BaseClass();
// 单个实例添加成员变量
instance1.nameTest = "jadeshu";
console.log(instance1.nameTest); // jadeshu
var instance2 = new BaseClass();
console.log(instance2.nameTest); // instance2.nameTest is undefined

II.所有实例创建的时候都创建了同名的各自本地属性变量

// JS所有实例共享的成员变量
function BaseClass() {
  // 所有实例创建时都有的同名实例变量
  this.nameTest = "jadeshu";
}
var instance1 = new BaseClass();
instance1.nameTest = "shu"; // 改变实例1的变量nameTest的值为shu
console.log(instance1.nameTest);  // shu
var instance2 = new BaseClass();
//实例1和实例2各自都有一个nameTest
console.log(instance2.nameTest);; // jadeshu

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery showModelDialog的使用方法示例详解
Nov 19 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
May 08 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
javascript 闭包详解
Feb 15 Javascript
ionic2打包android时gradle无法下载的解决方法
Apr 05 Javascript
angular2路由切换改变页面title的示例代码
Aug 23 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
Jan 07 Javascript
vue的diff算法知识点总结
Mar 29 Javascript
动态加载JavaScript文件的3种方式
May 05 Javascript
JavaScript RegExp 对象用法详解
Sep 24 Javascript
在vue中使用echars实现上浮与下钻效果
Nov 08 Javascript
js前端图片加载异常兜底方案
Jun 21 Javascript
js中forEach,for in,for of循环的用法示例小结
Mar 14 #Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 #Javascript
JS数组的高级使用方法示例小结
Mar 14 #Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 #Javascript
js函数和this用法实例分析
Mar 13 #Javascript
js对象简介与基本用法示例
Mar 13 #Javascript
JS自定义滚动条效果
Mar 13 #Javascript
You might like
PHP获取http请求的头信息实现步骤
2012/12/16 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
PHP中array_slice函数用法实例详解
2014/11/25 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
JQuery 文本框使用小结
2010/05/22 Javascript
JS中实现简单Formatter函数示例代码
2014/08/19 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
2016/09/06 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
python中尾递归用法实例详解
2015/04/28 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
python时间日期操作方法实例小结
2020/02/06 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
Python Selenium库的基本使用教程
2021/01/04 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
英国袜子店:Sock Shop
2017/01/11 全球购物
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
英国领先的独立酒精饮料零售商:DrinkSupermarket
2021/01/13 全球购物
幼儿园新学期寄语
2014/01/18 职场文书
审计专业自荐信范文
2014/04/21 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
幼儿园八一建军节活动方案
2014/08/27 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
幼儿园个人总结
2015/02/28 职场文书
行政上诉状范文
2015/05/23 职场文书
MySQL库表名大小写的选择
2021/06/05 MySQL
浅析NIO系列之TCP
2021/06/15 Java/Android