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 相关文章推荐
JavaScript的Cookies
Jan 16 Javascript
jQuery获取地址栏参数插件(模仿C#)
Oct 26 Javascript
Javascript操作cookie的函数代码
Oct 03 Javascript
动态载入js提高网页打开速度的方法
Jul 04 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
Feb 13 Javascript
JS对字符串编码的几种方式使用指南
May 14 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 Javascript
EditPlus中的正则表达式 实战(4)
Dec 15 Javascript
js插件实现图片滑动验证码
Sep 29 Javascript
Angular路由ui-router配置详解
Aug 01 Javascript
json 带斜杠时如何解析的实现
Aug 12 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中截取字符串支持utf-8
2007/01/18 PHP
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
js Flash插入函数免激活代码
2009/03/31 Javascript
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
JavaScript常用全局属性与方法记录积累
2013/07/03 Javascript
node.js入门教程
2014/06/01 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
JQuery中解决重复动画的方法
2016/10/17 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
js初始化验证实例详解
2016/11/26 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
Express框架之connect-flash详解
2017/05/31 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
JavaScript中的高级函数
2018/01/04 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
vue中element 上传功能的实现思路
2018/07/06 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
上海方立数码笔试题
2013/10/18 面试题
2015年党小组工作总结
2015/05/26 职场文书
单位提档介绍信
2015/10/22 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL