js面向对象之公有、私有、静态属性和方法详解


Posted in Javascript onApril 17, 2015

现下,javascript大行其道,对于网站开发人员来说,javascript是必需掌据的一门语言,但随着jquery等框架的流行和使用,许多人对于原生javascript缺乏深入的理解,习惯了函数式的编辑风格,对于闭包、原型总是说不清道不明.对于js面向对象蹩脚的用着,而要了解js面向对象,就必需先了解js中什么是公有方法、特权方法、静态方法

方法/步骤

1.公有属性和公有方法

function User(name,age){
  this.name = name;//公有属性
  this.age = age;
}
User.prototype.getName = function(){//公有方法
  return this.name;
}
var user = new User('fire子海',26);
console.log(user.getName());//output:fire子海

2.私有属性和方法

function User(name,age){
  var name = name;//私有属性
  var age = age;
  function alertAge(){//私有方法
     alert(age);
  }
  alertAge(age); //弹出26
}
var user = new User('fire子海',26);

3.静态属性和方法

在php中,无需实例化就可以调用的方法就叫静态方法,js也一样,无需实例化,即用new操作符实化对象,就可调用对象的方法和属性。

function User(){}
User.age = 26;//静态属性
User.myname = 'fire子海';
User.getName =function(){//静态方法
 
  return this.myname;//如果这里使用this.name,返回的将是User,所有改用了myname,
}
console.log(User.getName());//output:fire子海

4.特权方法

function User(name,age){
  var name = name;//私有属性
  var age = age;
  this.getName = function(){ //特权方法
     return name;//私有属性和方法不能使用this调用
  }
}
var user = new User('fire子海',26);
console.log(user.getName());//output:fire子海

5.静态类

对于静态方法和静态属性,我们无需像第三步中那样去创建,如果网友看过我那篇“js如何制作图片轮播”,就知道可以使用字面量的方式来创建。

var user = {
  init:function(name,age){
   this.name = name;
   this.age = age;
  },
  getName:function(){
   return this.name;
 }
}
user.init('fire子海',26);
console.log(user.getName());//output:fire子海

6.公有方法的调用规则

调用公有方法,我们必需先实例化对象

公有方法中通过不this调用公有属性和特权方法,不能使用this调用静态方法和属性,必需裁通过对象本身调用,即对象名。公有方法也不能调用私有方法

function User(){
  this.myname = 'fire子海';//公有属性
  this.age = 26;
  this.do = function(){//特权方法
    return this.myname+'学习js';
  }
}
User.eat = function(food){
 return '晚餐只有'+food;
}
User.prototype.alertAge = function(){
  alert(this.age);
}
User.prototype.alertDo = function(){
  alert(this.do());//调用特权方法
}
User.prototype.alertEat = function(food){
  alert(User.eat(food));//只能通过对象本身调用静态方法
  //alert(this.ear(food))这样调用将出错:this.eat is not a function
}
var user = new User();
user.alertAge();//alert:26
user.alertDo();//alert:fire子海学习js
user.alertEat('方便面')//alert:晚餐只有方便面

7.静态方法的调用规则

使用静态方法时,无需实例化对象,便可以调用,对象实例不能调用对象的静态方法,只能调用实例自身的静态属性和方法

function User(){}
User.age = 26;//静态属性
User.myname = 'fire子海';
User.getName =function(){//静态方法
 
  return this.myname;
}
var user = new User();
console.log(user.getName);//TypeError: user.getName is not a function
user.supper = '方便面';
user.eat = function(){
 return '晚餐只有'+this.supper;
}
user.eat();//晚餐只有方便面

静态方法无法调用公有属性、公有方法、私有方法、私有属性、特权方法和原型属性

function User(){
    this.myname = 'fire子海';//公有属性
    this.age = 26;
    this.do = function(){//特权方法
      return this.myname+'学习js';
    }
}
User.prototype.alertAge = function(){//公共方法,也叫原型方法
  alert(this.age);
}
User.prototype.sex = '男';//原型属性
User.getName= function(){//静态方法
  return this.myname;
}
User.getAge = function(){
   this.alertAge();
 
}
User.getDo = function(){
  return this.do();
}
//console.log(User.getName())//undefined
//console.log(User.getDo());//TypeError: this.do is not a function
//console.log(User.getAge())//TypeError: this.alertAge is not a function

8.特权方法的调用规则

特权方法通过this调用公有方法、公有属性,通过对象本身调用静态方法和属性,在方法体内直接调用私有属性和私有方法

function User(girlfriend){
   var girlfriend = girlfriend;
   function getGirlFriend(){ 
     return '我女朋友'+girlfriend+'是美女!';
   }
  this.myname = 'fire子海';//公有属性
  this.age = 26;
  this.do = function(){//特权方法
    return this.myname+'学习js';
  }
  this.alertAge = function(){
   this.changeAge();//特权方法调用公有方法
    alert(this.age);
  }
  this.alertGirlFriend = function(){
   alert(getGirlFriend());//调用私有方法
  }
}
User.prototype.changeAge = function(){
  this.age = 29;
}
var user = new User('某某');
user.alertAge();//alert:29
user.alertGirlFriend();//alert:我的女朋友某某是美女!

9.私有方法

对象的私有方法和属性,外部是不可以访问的,在方法的内部不是能this调用对象的公有方法、公有属性、特权方法的

function User(girlfriend){
   var girlfriend = girlfriend;
  this.myname = 'fire子海';//公有属性
  this.age = 26;
  function getGirlFriend(){ 
   //this.myname ;//此时的this指向的window对象,并非User对象,
    // this.myname = 'fire子海',此时的this指向的是getGirFriend对象了。
  //如果通过this调用了getGirFriend中不存在的方法呀属性,this便会指向window 对象,只有this调用了getGirlFriend存在的方法和属性,this才会指定getGirlFriend;
     alert(User.eat('泡面'));//alert:晚餐只有方便面
  }
  this.do = function(){//特权方法
    return this.myname+'学习js';
  }
  this.alertAge = function(){
   this.changeAge();//特权方法调用公有方法
    alert(this.age);
  }
  this.alertGirlFriend = function(){
   getGirlFriend();//调用私有方法
  }
}
User.eat = function(supper){
 return '晚餐只有'+supper;
}
var user = new User('某某');
user.alertGirlFriend();

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JS中style属性
Oct 11 Javascript
JavaScript 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
Nov 17 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
Feb 20 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 Javascript
jQuery层次选择器用法示例
Sep 09 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
checkbox:click事件触发span元素内容改变的方法
Sep 11 Javascript
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 Javascript
Vue仿微信app页面跳转动画效果
Aug 21 Javascript
jQuery中toggle()函数的使用实例
Apr 17 #Javascript
JQuery实现可直接编辑的表格
Apr 16 #Javascript
JS中捕获console.log()输出的方法
Apr 16 #Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
Apr 16 #Javascript
JavaScript通过setTimeout实时显示当前时间的方法
Apr 16 #Javascript
jQuery监控文本框事件并作相应处理的方法
Apr 16 #Javascript
JavaScript动态修改背景颜色的方法
Apr 16 #Javascript
You might like
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
PHP使用Session遇到的一个Permission denied Notice解决办法
2014/07/30 PHP
php绘制一个矩形的方法
2015/01/24 PHP
PHP版微信公众平台红包API
2015/04/02 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
google 搜索框添加关键字实现代码
2010/04/24 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
基于JavaScript如何制作遮罩层对话框
2016/01/26 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
react.js 获取真实的DOM节点实例(必看)
2017/04/17 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
2019/05/10 Javascript
BootstrapValidator验证用户名已存在(ajax)
2019/11/08 Javascript
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
[52:02]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第二场 2月26日
2021/03/11 DOTA
Python文件夹与文件的操作实现代码
2014/07/13 Python
Python中optparse模块使用浅析
2015/01/01 Python
在Python的Django框架中创建和使用模版
2015/07/15 Python
Python 基础教程之包和类的用法
2017/02/23 Python
Python编程使用tkinter模块实现计算器软件完整代码示例
2017/11/29 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
树莓派升级python的具体步骤
2020/07/05 Python
python高级特性简介
2020/08/13 Python
python可视化分析的实现(matplotlib、seaborn、ggplot2)
2021/02/03 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
房屋委托书范本
2014/04/04 职场文书