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 相关文章推荐
JavaScript 对象成员的可见性说明
Oct 16 Javascript
根据json字符串生成Html的一种方式
Jan 09 Javascript
鼠标移动到图片名上,显示图片的简单实例
Jul 14 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
Jul 30 Javascript
原生javascript实现匀速运动动画效果
Feb 26 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
利用ES6语法重构React组件详解
Mar 02 Javascript
详解如何用VUE写一个多用模态框组件模版
Sep 27 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 Javascript
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
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
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
PHP 导出Excel示例分享
2014/08/18 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
php实现通过soap调用.Net的WebService asmx文件
2017/02/27 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
PHP 实现base64编码文件上传出现问题详解
2020/09/01 PHP
js的写法基础分析
2011/01/17 Javascript
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
html页面显示年月日时分秒和星期几的两种方式
2013/08/20 Javascript
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
2015/08/26 Javascript
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
js中数组对象去重的两种方法
2019/01/18 Javascript
小程序实现搜索框
2020/06/19 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
Python3搜索及替换文件中文本的方法
2015/05/22 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
python怎么对数字进行过滤
2020/07/05 Python
Pytorch之Tensor和Numpy之间的转换的实现方法
2020/09/03 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
学校大课间活动方案
2014/01/30 职场文书
旅游业大学生创业计划书
2014/01/31 职场文书
体育活动总结
2015/02/04 职场文书
Pytest中conftest.py的用法
2021/06/27 Python