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可访问其它域名的cookie的方法
Sep 18 Javascript
jQuery Lightbox 图片展示插件使用说明
Apr 25 Javascript
JQuery对checkbox操作 (循环获取)
May 20 Javascript
javascript仿php的print_r函数输出json数据
Sep 13 Javascript
代码触发js事件(click、change)示例应用
Dec 13 Javascript
原生js实现日期联动
Jan 12 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 Javascript
javascript将16进制的字符串转换为10进制整数hex
Mar 05 Javascript
VueX模块的具体使用(小白教程)
Jun 05 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 动态多文件上传
2009/01/18 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
基于jquery实现漂亮的动态信息提示效果
2011/08/02 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
jQuery中after的两种用法实例
2013/07/03 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
JavaScript注册时密码强度校验代码
2017/06/30 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
React Native 图片查看组件的方法
2018/03/01 Javascript
angular实现input输入监听的示例
2018/08/31 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
解决layer.open后laydate失效的问题
2019/09/06 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
[01:04:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第二场 1月31日
2021/03/11 DOTA
Python发送Email方法实例
2014/08/21 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
python palywright库基本使用
2021/01/21 Python
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
村委会主任先进事迹
2014/01/15 职场文书
大学活动总结模板
2014/07/10 职场文书
金秋助学感谢信
2015/01/21 职场文书
2016中秋晚会开幕词
2016/03/03 职场文书
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
2021/12/06 HTML / CSS
APP界面设计技巧和注意事项
2022/04/29 杂记