Javascript之面向对象--封装_javascript技巧

第一步:做一个“手机的类"

var MobilePhone = (function(){
    …………
})()

第二步:考虑这个类,里需要那些类的私有属性,这里我想定义的是实例出来手机的数量

var MobilePhone = (function(){
 //私有属性
 var count = 0; //代表手机的数量
})()

第三步:创建一个构造函数,即实例时候,对产生的新象的一个初始化,例如属性,方法的初始化;在这个例子中,每一个手机都会有颜色,大小,价格属性.这里的构造函数也是一个闭包,所以可以访问count,并且count的值会长期保存在内存中(只要有引用存在)

var MobilePhone = (function(){
 //私有属性
 var count = 0; //代表手机的数量 
     //构造函数
     var creatphone = function(color,size,price){
         count++;
         this._color = color; //手机的颜色
         this._size = size; //手机的大小
         this._price = price; //手机的价格
         this.index = count; //手机索引,是第几台创建的手机手象
      }
})()

第四步:共有方法:

即所有实例出来的手机对象,都能使用的方法,这里手机应该可以改变价格,颜色,大小,也可以显示大小,颜色,价格。

这里的共有方法应该放在“原型对象”中:

1.所有通过该构造函数实例的对象,也就是造出的手机,都能使用“原型对象”中的方法。

2.如果放在构造函数中,那么每一次实例一个手机对象出来,都会产生一堆重复的方法,占用内存。

3."constructor":creatphone解释:

因为creatphone.prototype ={……}相当对把之前的原型对象的引用,给复盖掉了。而为了让原型对象和该构造函数关联起来 设置了"constructor":creatphone,这个属性.

var MobilePhone = (function(){
 //私有属性
 var count = 0;//代表手机的数量
    //构造函数
     var creatphone = function(color,size,price){
        count++;
        this._color = color; //手机的颜色
        this._size = size; //手机的大小
        this._price = price; //手机的价格
        this.index = count; //手机索引,是第几台创建的手机手象
      }
 //公有方法,存放在原型对象中
 creatphone.prototype = {
      "constructor":creatphone,
      //获取手机颜色
  "getColor" : function(){
  return this._color;
  },
      //设置手机颜色
  "setColor" : function(color){
  this._color = color;
  },
      //获取手机大小
  "getSize" : function(){
  return "width:"+this._size.width + " height:" + this._size.height;
  },
      //设置手机大小
  "setSize" : function(size){
  this._size.width = size.width;
  this._size.height = size.height;
  },
      //获取手机价格
  "getPrice" : function(){
  return this._price;
  },
      //设置手机价格
  "setPrice" : function(price){
  this._price = price
  }
 }
})()

第五步:特权方法,即需要有一个方法,能够去访问类的私有变量。就是实例出来多少台手机对象

var MobilePhone = (function(){
 //私有属性
 var count = 0;//代表手机的数量
 var index = 0;//代表手机的索引
     //构造函数
     var creatphone = function(color,size,price){
         count++;
         this._color = color; //手机的颜色
         this._size = size; //手机的大小
         this._price = price; //手机的价格
         this.index = count; //手机索引,是第几台创建的手机手象
       }
     //公有方法,存放在原型对象中
 creatphone.prototype = {
  "constructor":creatphone,
  "getColor" : function(){
  return this._color;
  },
  "setColor" : function(color){
  this._color = color;
  },
  "getSize" : function(){
  return "width:"+this._size.width + " height:" + this._size.height;
  },
  "setSize" : function(size){
  this._size.width = size.width;
  this._size.height = size.height;
  },
  "getPrice" : function(){
  return this._price;
  },
  "setPrice" : function(price){
  this._price = price
  }
 }
 //特权方法
 creatphone.get_count_index = function(){
  return count
 }
 return creatphone;
})()

用上面封装的一个手机类 测试

var anycall = new MobilePhone(); //实例一个三星手机对象
var HTC = new MobilePhone(); //实例一个HTC手机对象
var Iphone4s = new MobilePhone(); //实例一个苹果4S手机对象
console.log("三星是第:"+anycall.index+"台"); //FF的控制台输出三星手机对象是第几台创建的,即索引;
console.log("HTC是第:"+HTC.index+"台"); //FF的控制台输出HTC手机对象是第几台创建的,即索引;
console.log("Iphone4s是第:"+Iphone4s.index+"台");  //FF的控制台输出个苹果4S手机对象是第几台创建的,即索引;
console.log("总共造出了"+MobilePhone.get_count_index()+"手机"); //FF的控制台输出总共创建了几台手机;
console.log(anycall.constructor === MobilePhone); //实例出来的对象,的原形象中的constructor,是否还指向MobilePhone

 结果如下,全完正确:

以上就是本文的全部内容,希望对大家有所帮助,感兴趣的朋友可以看下《Javascript之面向对象--方法》谢谢对的支持!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js
, 面向对象
封装
javascript 面向对象、面向对象的javascript、javascript中面向对象、javascript是面向对象、面向对象 封装,以便于您获取更多的相关知识。

时间: 2024-08-01 21:18:54

Javascript之面向对象--封装_javascript技巧的相关文章

Javascript之面向对象--方法_javascript技巧

JavaScript面向对象是近年来比较火的一个概念了,由于小弟才疏学浅,虽然做过不少的web项目,看了网上很多深奥的资料和教程,还是对他们深奥的理论一知半解,前段时间看了点书,总算有了自己的理解,今天也出来装一回,如果觉得很深奥,请直接鄙视我,如果觉得不对,请直接拍砖. 先通俗了解下面一些东西. 在JS代码中写入function fn(){}或者var fn=function(){}等等,你都可以将其理解为对象,当然还有数组等等. 在理解面向对象之前,先了解下面几个东西吧. 1.对象方法的调用

Javascript之面向对象--接口_javascript技巧

接口:对实现某一种任务.功能,目的等,所规定的一些原则. 程序中的接口:规定好有几个方法,方法名是什么.(因程序中要完成任务,都是通过函数或者说方法去实现的.) javascript中的接口:把实例出来的某"类型对象".和实例出来的"接口对象",进行一个比较,符合规则,就可以说:这个对象实现了规定的接口: (接口类:通过这个类,来实例出不同的接口.即不同的接口实例,也就是不同的方法个数和方法名称)  (进行比较:其实质就是判断子类型实例出来的对象,是否有接口对象中所

学习Javascript面向对象编程之封装_javascript技巧

Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类). 那么,如果我们要把"属性"(property)和"方法"(method),封装成一个对象,甚至要从原型对象生成一个实例对象,我们应该怎么做呢?一. 生成对象的原始模式 假定我们把猫看成一个对象,它有"名字"和"颜色"两个属性. var Ca

JavaScript的面向对象(二)_javascript技巧

上一篇写的废话太多,写得很烂,这一次讲讲继承吧,我们上一节知道了prototype,现在我从prototype下手来实现方法 <scrīpt LANGUAGE="Javascrīpt"> <!-- function 职业(){  var 须知="每天要好好上班"; } 职业.prototype.上班=function(name){  return name+"上班"; } 职业.prototype.下班=function(){

JavaScript的面向对象(一)_javascript技巧

一.传统的基于原型(Prototype)的做法 确切地说Javascrīpt的"类"在严格意义上来讲并不能算真正的类,从其声明的对象到类(估切这么说)有这样一个关系: Instance.__proto__=InstanceClass.prototype(ie不支持) 以上说明:实例的属性(__proto__)等于类的prototpye,我们可以看出,实例的"__proto__"正好巧接在类的"prototype"上,通过原型链(prototype

Javascript 面向对象特性_javascript技巧

1. JavaScript中的类型 -------- 虽然JavaScript是一个基于对象的语言,但对象(Object)在JavaScript中不是第一型的.JS 是以函数(Function)为第一型的语言.这样说,不但是因为JS中的函数具有高级语言中的函 数的各种特性,而且也因为在JS中,Object也是由函数来实现的.--关于这一点,可以在 后文中"构造与析构"部分看到更进一步的说明. JS中是弱类型的,他的内置类型简单而且清晰: ------------------------

js实现对ajax请求面向对象的封装_javascript技巧

AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 在js中使用ajax请求一般包含三个步骤:               1.创建XMLHttp对象               2.发送请求:包括打开链接.发送请求               3.处理响应 在不使用任何的js框架的情况下,要想使用ajax,可能需要向下面一样进行代码的编写 <span style=&qu

学习javascript面向对象 实例讲解面向对象选项卡_javascript技巧

本文实例讲解了最简单的面向对象选项卡实现方法,分享给大家供大家参考,具体内容如下 效果图: 1.功能说明 点击三个按钮分别显示对应的选项卡 2.html代码说明 <div class="box" id="box"> <ul class="list"> <li class="in_active">第一张选项卡</li> <li class="in">

理解javascript封装_javascript技巧

封装可以被定义为对对象的内部数据表现形式和实现细节进行隐藏.通过封装可以强制实施信息隐藏. 在JavaScript中,并没有显示的声明私有成员的关键字等.所以要想实现封装/信息隐藏就需要从另外的思路出发.我们可以使用闭包的概念来创建只允许从对象内部访问的方法和属性,来达到封装的要求. 基本方式 一般来说,我们学用的有三种方法来达到封装的目的. 使用this.XXX来声明一个变量,然后再声明getXXX.setXXX等取值.赋值的方法. 使用this._XXX来声明一个变量,然后再声明getXXX