首页 web前端 js教程 Javascript之面向对象--方法

Javascript之面向对象--方法

Jan 04, 2017 am 09:41 AM

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之面向对象--封装》谢谢对PHP中文网的支持!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它们
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何创建和发布自己的JavaScript库? 如何创建和发布自己的JavaScript库? Mar 18, 2025 pm 03:12 PM

文章讨论了创建,发布和维护JavaScript库,专注于计划,开发,测试,文档和促销策略。

如何在浏览器中优化JavaScript代码以进行性能? 如何在浏览器中优化JavaScript代码以进行性能? Mar 18, 2025 pm 03:14 PM

本文讨论了在浏览器中优化JavaScript性能的策略,重点是减少执行时间并最大程度地减少对页面负载速度的影响。

前端热敏纸小票打印遇到乱码问题怎么办? 前端热敏纸小票打印遇到乱码问题怎么办? Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中,小票打印是一个常见的需求。然而,很多开发者在实...

如何使用浏览器开发人员工具有效调试JavaScript代码? 如何使用浏览器开发人员工具有效调试JavaScript代码? Mar 18, 2025 pm 03:16 PM

本文讨论了使用浏览器开发人员工具的有效JavaScript调试,专注于设置断点,使用控制台和分析性能。

谁得到更多的Python或JavaScript? 谁得到更多的Python或JavaScript? Apr 04, 2025 am 12:09 AM

Python和JavaScript开发者的薪资没有绝对的高低,具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大,薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

如何使用源地图调试缩小JavaScript代码? 如何使用源地图调试缩小JavaScript代码? Mar 18, 2025 pm 03:17 PM

本文说明了如何使用源地图通过将其映射回原始代码来调试JAVASCRIPT。它讨论了启用源地图,设置断点以及使用Chrome DevTools和WebPack之类的工具。

console.log输出结果差异:两次调用为何不同? console.log输出结果差异:两次调用为何不同? Apr 04, 2025 pm 05:12 PM

深入探讨console.log输出差异的根源本文将分析一段代码中console.log函数输出结果的差异,并解释其背后的原因。�...

初学者的打字稿,第2部分:基本数据类型 初学者的打字稿,第2部分:基本数据类型 Mar 19, 2025 am 09:10 AM

掌握了入门级TypeScript教程后,您应该能够在支持TypeScript的IDE中编写自己的代码,并将其编译成JavaScript。本教程将深入探讨TypeScript中各种数据类型。 JavaScript拥有七种数据类型:Null、Undefined、Boolean、Number、String、Symbol(ES6引入)和Object。TypeScript在此基础上定义了更多类型,本教程将详细介绍所有这些类型。 Null数据类型 与JavaScript一样,TypeScript中的null

See all articles