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;
// 1
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;// 1obj.test2();// alert

// 动态删除方法与属性delete o.prototype.testdelete o.prototype.test2

// 动态增加实例属性与方法var t = new o();t.v = ‘2‘;t.x = function(){alert(1)}t.v;// 2t.x();// alert

// 删除实例属性和方法delete t.vdelete t.x

另外关于实例属性还可以通过下标的方式,在此我多说了,(感谢保住happykejie)大家可以参考博主happykejie的文章JS 自定义对象 属性   ,这里主要是讲了一点个人的理解与记录,这样利于记忆。

原文地址:https://www.cnblogs.com/jony-it/p/10296755.html

时间: 2024-10-21 09:51:20

JS 创建自定义对象的方式方法的相关文章

JS创建自定义对象

创建对象: 1.people = new Object(); people.name = "lin"; people.age = "26“; 2.创建字典对象 people = {name:"lin",age:"30"}; 3.通过set方法创建对象 function people(name,age){ this._name = name; this._age = age; } son = people("lin",

Exchange 2013 PowerShell创建自定义对象

PowerShell是一个基于对象的Shell,在写一行程序,脚本和函数时,給了我们很大的灵活性.当生成详细的报告时,我们需要从代码中自定义我们的数据输出,或者可以通过管道输送到其它的命令.我们还需要能够控制和定制代码的输出,这样我们可以合并来自多个源的数据到一个单独的对象.在这一节中,我们将学习下基本的构建定制的对象 首先我们要做的时创建一个邮箱对象的集合,将用来作为一组新的自定义对象的数据源: $mailboxes = Get-Mailbox 可以添加自定义的属性用于后续整个管道的对象属性,

创建JAVASCRIPT对象3种方法

创建JAVASCRIPT对象3种方法 方法一:直接定义并创建对象实例 var obj = new Object();    //创建对象实例 //添加属性obj.num = 5;   //添加属性 obj.fn = function( cin ){ return cin;}    //添加方法 访问对象的方法:objectName.methodName() 访问对象的属性:objectName.propertyName 方法二:用函数来定义对象然后创建对象实例 function Class(){

使用原生js创建自定义标签

使用原生js创建自定义标签 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA

JavaScript中创建自定义对象的方法

本文内容参考JavaScript高级程序设计(第3版)第6章:面向对象的程序设计 ECMA-262中把对象定义为:“无序属性的集合,其属性可以包含基本值.对象或者函数.”我所理解的就是对象就是一个结构体,结构体中有一些它的基本属性以及对结构体处理的方法,把它们封装起来称为一个整体.JS中所有的对象都是基于一个引用类型创建,这个引用类型可以是原生类型,如Array,Date等,也可以是开发人员自定义的类型. 下面主要总结下JS中创建对象的几种模式,分析他们各自的优缺点. 1. 工厂模式 /****

Javascript 中创建自定义对象的方法(设计模式)

Javascript 中创建对象,可以有很多种方法. Object构造函数/对象字面量: 抛开设计模式不谈,使用最基本的方法,就是先调用Object构造函数创建一个对象,然后给对象添加属性. 1 var student = new Object(); 2 student.name = "xiao ming"; 3 student.age = 20; 4 student.getName = function () { 5 alert(this.name); 6 } 熟悉javascrip

简单入门JavaScript库jQuery:用选择符创建jQuery对象并应用方法

jQuery,顾名思义,也就是JavaScript和查询(Query),是一个辅助JavaScript开发的库. jQuery 能极大地简化 JavaScript 编程. 目录1 jQuery库包含的特性2 jQuery与JS3 获取页面元素4 DOM事件与jQuery方法5 简易操作DOM元素6 处理尺寸7 遍历操作8 过滤操作9 jQuery对JS的增强10 为页面添加动态效果11 jQuery与Ajax12 jQuery工具 通过jQuery,您可以选取(查询,query) HTML元素,

Untiy3D联网插件——Photon的自定义对象池使用方法

本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/68068178 作者:cartzhang 一. 写在前面 最开始接触Photon的时候,没有怎么理解代码,我们自己的写的对象池与Photon结合使用起来非常不方便. 需要每次从池里取对象,然后手动设置ViewID,这样很烦人,从感觉来说,就是photon的打开方式不对. 直到有天再次耐心去读了Photon的代码才有发现,感觉是

JS数组与对象的遍历方法大全

本文简单解析各种数组和对象属性的遍历方法: 原生for循环.for-in及forEach ES6 for-of方法遍历类数组集合 Object.key()返回键名的集合 jQuery的$.each() underscore的_.each() 文中的范例基于以下数组和对象. ? 1 2 3 4 5 6 7 8 var arrTmp = ["value1","value2","value3"]; var objTmp = {     aa:"