Javascript之面向对象--方法


Posted in Javascript onDecember 02, 2016

JavaScript面向对象是近年来比较火的一个概念了,由于小弟才疏学浅,虽然做过不少的web项目,看了网上很多深奥的资料和教程,还是对他们深奥的理论一知半解,前段时间看了点书,总算有了自己的理解,今天也出来装一回,如果觉得很深奥,请直接鄙视我,如果觉得不对,请直接拍砖。

先通俗了解下面一些东西。

在JS代码中写入function fn(){}或者var fn=function(){}等等,你都可以将其理解为对象,当然还有数组等等。

在理解面向对象之前,先了解下面几个东西吧。

1.对象方法的调用

在js最外层写的function可以还可以理解为window对象的一个方法。定义的变量也可以称之为window对象的一个属性。例如:

var test=function(){
alert("123")
}
当然上面的你也可以这样定义
function test(){
alert("123")
}

作为window对象的方法我们可以这样调用

test()//弹出警告框123(因为window对象是顶级对象我们可以将其省略)
window.test()//弹出警告框123
window['test']()//弹出警告框123,可以将test理解为window数组对象下面的一个方法值。

通过以上的例子大致了解了对象的方法怎使用和调用。

2,私有方法

私有方法就是只有在对象内部作用域内部才能使用的方法。可以用变量作用域的方式来理解这个东西。
上面例子的function都可以理解为window对象的私有方法。继续看下面的例子。

var pet=function(){
 function showpet(){
 alert("123")
 }
 showpet();//私有方法可以在函数作用域范围内使用。
 var temp="私有变量只有在函数或者对象作用域范围内能访问"
}
showpet();//会出错
pet.showpet()//还是不能这样调用
var Penguin=new pet() //实例化一个pet对象
Penguin.showpet()//不好意思这样子还是不能让你调用。

如果我想定义的方法可以对象的作用域外面调用该怎么办呢?我该怎么使用私有方法呢?我们来看下一点内容吧。

3.静态方法

带着上面的问题我们继续上面的例子。

var pet=function(){
 function showpet(){//私有方法
 alert("123")
 }
 showpet();//私有方法可以在函数作用域范围内使用。
}
pet.show=function(){//给pet对象添加一个静态方法。
alert("456")
}
pet.name="Penguin"//给pet对象添加一个静态属性。
pet.show()//弹出警告框456
alert(pet.name)//弹出警告框Penguin
//继续思维碰撞
=====================
var Penguin=new pet() //实例化一个pet对象
Penguin.show()//不好意思,这个静态方法好像没有被实例继承。有这种思路值得表扬啊,加油!

上面的实例向你展示了什么叫静态方法,当然你可能会不明白,其实我也不懂,因为我也是菜鸟,但是只要你看了以后知道怎样为对象写一个静态方法,怎么调用该静态方法就可以了,也许某一天,你突然明白了就会回来教我了。带着上面的问题我们来看看实例化的对象能调用的方法。

4.公有方法

公有方法通常是通过修改构造函数的原型来实现的,修改一个对象的原型以后,所有该对象实例都会继承原型的修改(这句话极为装B,如果你感觉模糊就请忽略)。

修改对象原型的方法,继续上面的例子。

pet.prototype.setname=function(str){//通过修改原型添加一个公有方法,用于添加修改实例对象的name
name=str;
}

看例子:

var pet=function(){
 function showname(){//私有方法
 alert(this.name)
 }
 this.show=function(){ //如果这里不理解,请注意这个方法下面就要介绍了。
 showname();
 }
}
pet.prototype.setname=function(str){
name=str;
}
var Penguin=new pet()
 Penguin.setname("Penguin");//添加实例的name值为Penguin
 Penguin.show();   //弹出Penguin
 Penguin.setname("wind");//添加实例的name值为wind
 Penguin.show();   //弹出wind

  运行代码玩玩。

<script>
var pet=function(){
 name:"123",
 function showname(){//私有方法
 alert(this.name)
 }
 this.show=function(){
 showname();
 }
 }
pet.prototype.setname=function(str){
 name=str;
}
 var Penguin=new pet()
 Penguin.setname("Penguin");
Penguin.show();
Penguin.setname("wind");
Penguin.show();
</script>

5.特权方法(对象或者函数对外的接口)

其实在上面的例子中我们已经用到了这种方法。这种方法可以被实例化的对象继承所调用。通过在构造函数内部通过thsi关键字定义的的方法。特权方法能够在构造函数外面公开访问(仅限于实例化的对象),而且还能够访问私有成员和方法,因此用来做为对象或者构造函数的接口最合适不过了,通过特权函数我们可以控制公有方法对私有方法的访问,这个在JS框架的扩展中有很多应用。

各位看官可以当上面的是一段P话,我们具体来看看怎么样定义一个特权方法,怎样引用一个特权方法,继续调用上面得实例来看。

var pet=function(){
 function showname(){//私有方法
 alert(this.name)
 }
 this.show=function(){//通过使用this关键字定义一个特权方法。
 showname();  //在特权方法中访问私有方法;
 }
}
pet.prototype.setname=function(str){
name=str;
}
var Penguin=new pet();//实例化一个pet对象
 Penguin.setname("Penguin");//调用公有方法修改
 Penguin.show();   //调用特权方法访问私有方法,弹出name

首先通过在构造函数中用this.fn=function(){}建立一个特权方法。在特权函数中访问私有方法;

实例化的对象可以通过访问特权函数来使用部分私有方法,访问特权函数的方法同访问公有函数。

第一部分就暂时理解到这里了,下一部分会通过一个实例来诠释下面向对象是怎么装B的。

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

Javascript 相关文章推荐
代码精简的可以实现元素圆角的js函数
Jul 21 Javascript
javascript正则表达式中参数g(全局)的作用
Nov 11 Javascript
js 利用className得到对象的实现代码
Nov 15 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
Mar 24 Javascript
javascript的propertyIsEnumerable()方法使用介绍
Apr 09 Javascript
javascript实现table表格隔行变色的方法
May 13 Javascript
基于jQuery Ajax实现上传文件
Mar 24 Javascript
Vue组件通信的四种方式汇总
Feb 08 Javascript
vue实现点击选中,其他的不选中方法
Sep 05 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
KnockoutJS数组比较算法实例详解
Nov 25 Javascript
详解基于javascript实现的苹果系统底部菜单
Dec 02 #Javascript
Vue.js组件tree实现省市多级联动
Dec 02 #Javascript
Vue2实现组件props双向绑定
Dec 02 #Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 #Javascript
基于jQuery实现表格的排序
Dec 02 #Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 #Javascript
关于Vue.js一些问题和思考学习笔记(1)
Dec 02 #Javascript
You might like
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
2018/02/10 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
JavaScript数值类型知识汇总
2019/11/17 Javascript
angular异步验证防抖踩坑实录
2019/12/01 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
Python中的choice()方法使用详解
2015/05/15 Python
Python实现递归遍历文件夹并删除文件
2016/04/18 Python
Python探索之ModelForm代码详解
2017/10/26 Python
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
python支持多线程的爬虫实例
2019/12/21 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
Python-for循环的内部机制
2020/06/12 Python
解决python中0x80072ee2错误的方法
2020/07/19 Python
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
加大码胸罩、内裤和服装:Just My Size
2019/03/21 全球购物
垃圾回收的优点和原理
2014/05/16 面试题
房地产销售计划书
2014/01/10 职场文书
财务会计人员求职的自我评价
2014/01/13 职场文书
小学运动会口号
2014/06/07 职场文书
公司应聘求职信
2014/06/21 职场文书
乡镇党建工作汇报材料
2014/08/14 职场文书
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
公司员工手册范本
2015/05/14 职场文书