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 相关文章推荐
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
解析页面加载与js函数的执行 onload or ready
Dec 12 Javascript
使用jQuery实现input数值增量和减量的方法
Jan 24 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
js运动动画的八个知识点
Mar 12 Javascript
Javascript实现颜色rgb与16进制转换的方法
Apr 18 Javascript
javascript 闭包详解
Jul 02 Javascript
基于jQuery实现自动轮播旋转木马特效
Nov 02 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
Three.js实现3D机房效果
Dec 30 Javascript
webpack4从0搭建组件库的实现
Nov 29 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下保存远程图片到本地的办法
2010/08/08 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
php阳历转农历优化版
2016/08/08 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
js 弹出菜单/窗口效果
2011/10/30 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
javascript实现的元素拖动函数宿主为浏览器
2014/07/21 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
JavaScript Sort 的一个错误用法示例
2015/03/20 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
js一维数组、多维数组和对象的混合使用方法
2016/04/03 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
vue-cli webpack 引入swiper的操作方法
2018/09/15 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
京东优选小程序的实现代码示例
2020/02/25 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
python获取本地计算机名字的方法
2015/04/29 Python
Python的Flask框架及Nginx实现静态文件访问限制功能
2016/06/27 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
python查看列的唯一值方法
2018/07/17 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
利用python爬取有道词典的方法
2020/12/08 Python
Banana Republic英国官网:香蕉共和国,GAP集团旗下偏贵族风
2018/04/24 全球购物
心得体会开头
2014/01/01 职场文书
家长写给孩子的评语
2014/04/18 职场文书
2015年信访工作总结
2015/04/07 职场文书
看看如何用Python绘制小米新版天价logo
2021/04/20 Python
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python