JS 创建自定义对象的方式方法
一、概述
还记得刚开始做项目的时候,看到别人封装的js工具类百思不得其解,看来看去看不懂,深挖一下,其实就是自己没有耐下心去看,但是遇到问题不解决,总会遇到的,今天还是遇到了,就去找了找帖子,重新思考与实践一下,豁然开朗~!在此记录一下迟来顿开的茅塞。
关于JS 对象,啊,对象么,不就是一个个实例么,是的,js 也可以创建类,创建对象,创建对象方法,我们今天就具体说一下。
二、创建与使用(开始)
es 标准给我们提供了String、Math、Array等等这些js对象,当我们使用的时候只需要new一下或者使用其构造方法就可以,比如:
var v = ""; let arr = new Array();
类似上面这种,然后就可以使用其方法了,当然我们也可以给他添加类方法,如何加,大家向下看。
如果我们需要自己创建对象,使用最多的可能就是json对象,像是这样:
var obj = {x:{y:1}};
console.log(obj.x.y)
// 1
但是如果我们想把他搞成类似Array这种自定义类,然后创建我们需要的方法,咋整,直接加function 么,是的,就是加function,只不过要注意写法,还有的就是跟java对象一样,它有私有、实例、与类只说,接着往下看。
1)建立类,建立类的实例
首先我们建立一个对象,作为对象,必须要有构造方法,像是这样:
// 第一种
function t(){
alert(1);
} // 第二种
var t2 = function(){
alert(2)
}
是不是想骂人,喂,贴主你是不是忽悠人呢?这TM 不就是我们平时使用的函数吗,先别急,我不否认我们平时使用最多的在js 里就是这样,对于新手来说也是最容易,理解的就是个方法,但是函数也是对象,我们可以对他进行引用,也可以创建它的实例,像这样:
var test = new t();
恭喜你,你已经成功创建了t的实例,实例名为test。然后就可以调用类里的属性和方法了,好,我们接着建立方法,由于时间关系,我已经有点困了,以下就不多说了~~ (你妹的,快讲重点)
2)私有属性与私有方法
需要注意的时候私有属性和方法,外部是无法访问的,跟java类似,只提供给闭包内使用(关于闭包,有空再说),大家记住只能在你的类内部使用就好。
function t(
// 私有属性
var a = '1'; // 私有方法
var siyou = function(){
alert(1);
} )
3)实例属性与实例方法
关于实例方法,当我们建立类的实例后,就可以访问其实例方法与实例属性了,这里我声明了一个私有属性并把this赋值给他,为什么这样(以后再说,真困了= =),当然你可以直接使用this也可以。
function t(){
var _self = this;
_self.test=function(){
alert(1)
}
_self.test2 = 1;
}
// 调用
var test = new t();
t.test2;
//
t.test;
// alert
4)类方法与类属性
关于类方法,你可以把它理解为直接可以应用的方法或属性,比如Math.round(param) 就是最典型的类方法。
function t(){
var _self = this;
_self.test=function(){
alert(1)
}
_self.test2 = 1;
}
t.TEST=1;
t.TEST2=function(){.....}
// 或者引用
function test(){}
t.TEST2 = test;
三、动态增加与删除
下面是动态增加与删除。太困了~撑不住了。。
//动态增加属性
var obj = {};
obj.v = '2';
// 或者
obj[v] = '2';
// 上面是json对象哦 // 动态增加方法与属性
// 属性
var o = function(){};
o.prototype.test = '1';
// 方法
o.prototype.test2=function(){alert('test')}
var obj= new o();
obj.test;
// 1
obj.test2();
// alert // 动态删除方法与属性
delete o.prototype.test
delete o.prototype.test2 // 动态增加实例属性与方法
var t = new o();
t.v = '2';
t.x = function(){alert(1)}
t.v;
// 2
t.x();
// alert // 删除实例属性和方法
delete t.v
delete t.x
另外关于实例属性还可以通过下标的方式,在此我多说了,(感谢保住happykejie)大家可以参考博主happykejie的文章JS 自定义对象 属性 ,这里主要是讲了一点个人的理解与记录,这样利于记忆。
JS 创建自定义对象的方式方法的更多相关文章
- JS创建自定义对象
普通对象的创建: 创建对象: 1.people = new Object(); people.name = "lin"; people.age = "26“; 2.创建字 ...
- javascript创建自定义对象和prototype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【转】javascript中值传递,地址传递,引用传递的问题(使用js创建list对象时会用到)
function initEditModal_SI(node) { if (node.siArray == undefined) { node.siArray = new Object(); } va ...
- thinkphp 创建数据对象之data方法
创建数据对象:data()方法 1.功能:给模型对象$data赋值,将模型对象转化为数据对象 tip:模型对象与数据对象之间就差一个赋过值的$data; 2.方法:data()其源码如下: tip:源 ...
- 22.编写一个类A,该类创建的对象可以调用方法showA输出小写的英文字母表。然后再编写一个A类的子类B,子类B创建的对象不仅可以调用方法showA输出小写的英文字母表,而且可以调用子类新增的方法showB输出大写的英文字母表。最后编写主类C,在主类的main方法 中测试类A与类B。
22.编写一个类A,该类创建的对象可以调用方法showA输出小写的英文字母表.然后再编写一个A类的子类B,子类B创建的对象不仅可以调用方法showA输出小写的英文字母表,而且可以调用子类新增的方法sh ...
- js创建xml对象
js创建xml对象 //创建对象 function getDataXML() { var objTds = $("TEXTAREA"); var count = o ...
- 使用原生js创建自定义标签
使用原生js创建自定义标签 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- 创建JAVASCRIPT对象3种方法
创建JAVASCRIPT对象3种方法 方法一:直接定义并创建对象实例 var obj = new Object(); //创建对象实例 //添加属性obj.num = 5; //添加属性 o ...
- Javascript 中创建自定义对象的方法(设计模式)
Javascript 中创建对象,可以有很多种方法. Object构造函数/对象字面量: 抛开设计模式不谈,使用最基本的方法,就是先调用Object构造函数创建一个对象,然后给对象添加属性. var ...
随机推荐
- [HTML] SCSS 备忘录
Sass是成熟.稳定.强大的CSS预处理器,而SCSS是Sass3版本当中引入的新语法特性,完全兼容CSS3的同时继承了Sass强大的动态功能. 特性概览 CSS书写代码规模较大的Web应用时,容易造 ...
- 深度学习环境配置:Ubuntu16.04下安装GTX1080Ti+CUDA9.0+cuDNN7.0完整安装教程(多链接多参考文章)
本来就对Linux不熟悉,经过几天惨痛的教训,参考了不知道多少篇文章,终于把环境装好了,每篇文章或多或少都有一些用,但没有一篇完整的能解决我安装过程碰到的问题,所以决定还是自己写一篇我安装过程的教程, ...
- 在Ubuntu下编译安装nginx
一.安装nginx 1.安装前提 a)epoll,linux内核版本为2.6或者以上 b)gcc编译器,g++编译器 c)pcre库,函数库,支持解析正则表达式 d)zlib库:压缩解压功能 e)op ...
- 第四章 PCA降维
目录 1. PCA降维 PCA:主成分分析(Principe conponents Analysis) 2. 维度的概念 一般认为时间的一维,而空间的维度,众说纷纭.霍金认为空间是10维的. 3. 为 ...
- 上台阶问题(递归,DFS)
题目 一共39层台阶.如果我每一步迈上1个台阶或者两个台阶,先迈左脚,再迈右脚,然后左右交换,最后一步迈右脚,也就是一共要走偶数步,那么,上完39级台阶,有多少种不同的方法? 思路 采用递归的思想,边 ...
- ElasticSearch入门2: 基本用法
基本用法: 一.索引创建 (启动集群和索引请看上一篇文章:http://www.cnblogs.com/liuxiaoming123/p/8081883.html) 1.打开浏览器,输入请求:htt ...
- 什么情况下ArrayList增删 比LinkedList 更快
public static void main(String[] args){ final int MAX_VAL = 10000; List<Integer> linkedList = ...
- JavaScript --Window-对话框
-----038-Window-对话框.html----- <!DOCTYPE html> <html> <head> <meta http-equiv=&q ...
- windows平台,实现录音功能详解
音频处理分为播放和录音两类.对这些处理,微软提供了一些列函数,称之为Waveform Functions.这篇文章讨论录音功能.会对微软提供的函数做简单说明,并对这些函数封装成c++类,再进一步封装成 ...
- 用Elasticsearch做大规模数据的多字段、多类型索引检索
本文同时发布在我的个人博客 之前尝试了用mysql做大规模数据的检索优化,可以看到单字段检索的情况下,是可以通过各种手段做到各种类型索引快速检索的,那是一种相对简单的场景. 但是实际应用往往会复杂一些 ...