博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript 面向对象编程
阅读量:5017 次
发布时间:2019-06-12

本文共 1500 字,大约阅读时间需要 5 分钟。

写的项目需要把js封装处理,不然很乱。。然后就想到前端大神阮一峰了,去blog搜索一下果然有收获

参考文章:

 

此处使用极简主义法:

 

如何定义一个类:

此法是定义一个生成器以及构造函数(类似工厂模式吧)

var Cat = {

    createNew: function(){

    var cat = {};

    cat.name = "大毛";

    cat.makeSound = function(){ alert("喵喵喵"); };

    return cat;

  }

};

Cat是生成器类,createNew是一个构造器函数,cat是实体对象,cat.name是成员变量

 

如何调用构造器:

var cat1 = Cat.createNew();cat1.makeSound(); // 喵喵喵

 

如何定义私有变量:

cat.name是一个公有变量,外部可以直接访问

定义私有变量的方法则是在构造函数里定义一个局部变量,这样只有类的成员函数能够访问这个变量了,外部访问是undefined

var Cat = {    createNew: function(){    var cat = {};    var sound = "喵喵喵";    cat.makeSound = function(){ alert(sound); };     var privateFun() {alert("private")}     cat.publicFun() {
      privateFun(); //注意这里不能用this.privateFun();,会报错       alert("public");     }     return cat;  }};

测试结果

var test = Cat.createNew();test.privateFun(); // undefinedtest.publicFun(); // "private" "public"

 

 

 

如何定义静态变量(数据共享):

在Cat这个构造类内定义变量。。这就涉及到闭包的知识了,Cat类只存在一个实力,而cat1=Cat.createNew(),实际上是在Cat类的一个子函数定义一个变量,子函数是可以访问父类/父函数内的变量的,所以无论那个实体类修改Cat的成员变量的时候,Cat这个类里的变量就修改了,就实现了相当于Java的静态变量的功能了

var Cat = {    sound : "喵喵喵",    createNew: function(){    var cat = {};    cat.makeSound = function(){ alert(Cat.sound); };    cat.changeSound = function(x){ Cat.sound = x; };    return cat;  }};

这样sound就是一个静态变量

然后生成两个实例对象并用其中一个修改sound

var cat1 = Cat.createNew();var cat2 = Cat.createNew();cat1.makeSound(); // 喵喵喵cat2.changeSound("啦啦啦");cat1.makeSound(); // 啦啦啦

 

 

 

cat2.changeSound("啦啦啦");

  cat1.makeSound(); // 啦啦啦

转载于:https://www.cnblogs.com/someblue/p/4330770.html

你可能感兴趣的文章
debian配置简单的vsftp服务器
查看>>
Qt 国际化之二:多国语界面动态切换的实现
查看>>
Advanced Design System 2014.01 (64-bit Simulations)终于破解成功了
查看>>
洛谷P1101 单词方针
查看>>
mac office2011 字体模糊
查看>>
利用js自带函数验证邮箱,不用正则表达式
查看>>
aptana乱码解决办法(很原始的方法)
查看>>
正则匹配IP
查看>>
git源码中的Makefile
查看>>
out
查看>>
sql server 基础知识
查看>>
Multiples of 3 and 5
查看>>
什么是渲染流水线
查看>>
Maven新建webapp项目index.jsp报错
查看>>
Spring中使用RedisTemplate操作Redis(spring-data-redis)
查看>>
关于创建数据表
查看>>
Reverse Linked List II
查看>>
复杂链表的复制
查看>>
在实际工作中使用requests+unittest进行接口测试
查看>>
漏洞银行工控安全直播笔记整理
查看>>