JavaScript 面向对象编程

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

参考文章:

Javascript定义类(class)的三种方法

Javascript 面向对象编程(一):封装

此处使用极简主义法:

如何定义一个类:

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

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(); // undefined
test.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(); // 啦啦啦

时间: 2024-12-16 15:49:53

JavaScript 面向对象编程的相关文章

[连载]JavaScript讲义(03)--- JavaScript面向对象编程

[连载]JavaScript讲义(03)--- JavaScript面向对象编程,布布扣,bubuko.com

Javascript面向对象编程(二):构造函数的继承

这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承"的五种方法. 比如,现在有一个"动物"对象的构造函数. function Animal(){ this.species = "动物"; } 还有一个"猫"对象的构造函数. function Cat(name,color){ this.name = name; this.color = col

Javascript 面向对象编程(一):封装

学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握. 下面就是我的学习笔记,希望对大家学习这个部分有所帮助.我主要参考了以下两本书籍: <面向对象的Javascript>(Object-Oriented JavaScript) <Javascript高级程序设计(第二版)>(Professional JavaScript for Web Developers, 2nd

再谈javascript面向对象编程

前言:虽有陈皓<Javascript 面向对象编程>珠玉在前,但是我还是忍不住再画蛇添足的补上一篇文章,主要是因为javascript这门语言魅力.另外这篇文章是一篇入门文章,我也是才开始学习Javascript,有一点心得,才想写一篇这样文章,文章中难免有错误的地方,还请各位不吝吐槽指正 吐槽Javascript 初次接触Javascript,这门语言的确会让很多正规军感到诸多的不适,这种不适来自于Javascript的语法的简练和不严谨,这种不适也 来自Javascript这个悲催的名称,

JavaScript面向对象编程深入分析

二. Javascript 面向对象编程:构造函数的继承 本节主要介绍,如何生成一个"继承"多个对象的实例. 比如,现在有一个"动物"对象的构造函数, function Animal(){ this.species = "动物"; } 还有一个"猫"对象的构造函数, function Cat(name,color){ this.name = name; this.color = color; } 怎样才能使"猫&qu

【转】Javascript 面向对象编程(一):封装

原文链接:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html Javascript 面向对象编程(一):封装 作者:阮一峰 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类). 那么,如果我们要把"属性"(property)和"

[Javascript] 面向对象编程思想

1.创建对象 1.1 new 用new进行创建对象: var user = new Object(); user.age = 12;//同时为对象添加属性 user.name = 'ajun'; 1.2{} 用{}创建对象,如: var user = { 'name':'ajun, 'age':12 } 这里同时候为user添加了两个属性分别为:name,age 在以上代码稍加改造,你还可以为一个对象添加一个方法,如: var user = { 'name':'ajun', 'age':12 '

Javascript 面向对象编程:封装

学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握. ============================ Javascript 面向对象编程(一):封装 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类). 那么,如果我们要把"属性"

Javascript 面向对象编程(一):封装 by 阮一峰

<Javascript高级程序设计(第二版)>(Professional JavaScript for Web Developers, 2nd Edition) 它们都是非常优秀的Javascript读物,推荐阅读. 笔记分成三部分.今天的第一部分是讨论"封装"(Encapsulation),后面的第二部分和第三部分讨论"继承"(Inheritance). ============================ Javascript 面向对象编程(一)