javascript函数的四种调用模式及其this关键字的区别
方法调用模式:
当一个函数被保存为对象的一个属性时,我们称它为一个方法。当一个方法被调用时,this被绑定到该对象。
//方法调用模式
var myObject = {
value: 0 ,
increment: function(inc){
this.value += (typeof inc === 'number') ? inc :1;
}
};
myObject.increment();
document.writeln(myObject.value);
myObject.increment(2);
document.writeln(myObject.value);
函数调用模式:
当一个函数非一个对象的属性时,那么它被当作一个函数来调用。当函数以此模式调用时,this被绑定到全局对象。这是语言设计上的一个错误。若语言设计正确,当内部函数被调用时,this应该仍然绑定到外部函数的this变量。解决方法是:如果 该方法定义一个变量并给它赋值为this,那个内部函数就可以通过那个变量访问到this。按约定,给那个变量命名为that。
//函数调用模式
function add(a,b){
return a+b;
}
myObject.doubled = function () {
var that = this;
document.writeln(that.value);
var helper = function () {
that.value = add(that.value,that.value);
}
helper();
}; myObject.doubled();
document.writeln(myObject.value);
构造器调用模式:
javascript是一门基于原型继承的语言。是无类别的。如果在一个函数前面带上new来调用,那么将创建一个隐藏连接到该函数的prototype成员的新对象,同时this将会被绑定到那个新对象上。同时new前缀也会改变return语句的行为,这里就不做更多说明了。
//构造器调用模式
var Quo = function (string){
this.status = string;
}
Quo.prototype.get_status = function(){
return this.status;
};
//构造一个Quo实例
var myQuo = new Quo("confused"); document.writeln(myQuo.get_status());
Apply调用模式:
因为javascript是一门函数式的面向对象语言,所以函数可以拥有方法。apply方法让我们构建一个参数数组并用其去调用函数。它也允许我们选择this的值。apply接收两个参数。第一个将被绑定给this的值。第二登上就是一个参数数组。
//Apply调用模式
var statusObject = {
status:'A-OK'
};
//statusObject 并没有继承自Quo.prototype,但我们可以在statusObject上调用
//用get_status 方法,尽管statusObject并没有一个名为get_status的方法。 var status = Quo.prototype.get_status.apply(statusObject);
document.writeln(status);
//不会改变原来的属性
document.writeln(myQuo.get_status());
总结:
javascript的this非常灵活也非常危险,开发者在使用this的时候,要清楚的知道this所指向的是哪个对象,如果明确了接下来要大量使用指向某个对象的this,最好的做法是将this赋值于类似that的这种变量,以免在下面使用子函数的时候混淆。
javascript函数的四种调用模式及其this关键字的区别的更多相关文章
- JS面向对象函数的四种调用模式
函数的四种调用模式 概念 在 js 中,无论是函数, 还是方法, 还是事件, 还是构造器,...这些东西的本质都是函数 函数, 方法, 事件, 构造器,...只是所处的位置不同 这四种模式分别是 函数 ...
- 函数的四种调用模式.上下文调用.call.apply
闭包:函数就是一个闭包,一个封闭的作用域; 返回函数,要返回多个函数就用一个对象封装一下, 立即执行函数+return 回调函数 JS动态创建的DOM,不会被搜索引 ...
- javascript中函数的四种调用模式详解
介绍函数四种调用模式前,我们先来了解一下函数和方法的概念,其实函数和方法本质是一样,就是称呼不一样而已.函数:如果一个函数与任何对象关系,就称该函数为函数.方法:如果一个函数作为一个对象属性存在,我们 ...
- JS函数的四种调用模式
函数在js中具有四种身份,分别为函数.方法.构造函数.apply或call调用 函数调用 函数调用模式中this指全局对象(window) var f1 = function() { alert ...
- javascript 函数的4种调用模式
1. 函数模式 // this 指向 window 全局对象 2. 方法模式 // this 指向调用这个方法的对象 3. 构造函数模式 // this 指向 new 新创建出来的实例 4. 上下文模 ...
- js高级-函数的四种调用模式
1.对象方法调用模式 方法内部的this指向当前调用者的对象d 定义类 (构造函数) function Dog (dogName){ //创建一个空对象 让空对象==this this.name ...
- javascript this 代表的上下文,JavaScript 函数的四种调用形式
JavaScript 是一种脚本语言,支持函数式编程.闭包.基于原型的继承等高级功能.其中JavaScript 中的 this 关键字,就是一个比较容易混乱的概念,在不同的场景下,this会化身不同的 ...
- JavaScript (JS) 函数补充 (含arguments、eval()、四种调用模式)
1. 程序异常 ① try-catch语法 测试异常 try-catch语法代码如下: try { 异常代码; try中可以承重异常代码, console.log(“try”) 出现异 ...
- JavaScript高级之函数的四种调用形式
主要内容 分析函数的四种调用形式 弄清楚函数中this的意义 明确构造函对象的过程 学会使用上下文调用函数 了解函数的调用过程有助于深入学习与分析JavaScript代码. 本文是JavaScript ...
随机推荐
- [ python ] 小脚本及demo-持续更新
1. 备份文件并进行 md5 验证 需求分析: 根据需求,这是一个流程化处理的事件. 检验拷贝文件是否存在,不存在则执行拷贝,拷贝完成再进行 md5 值的比对,这是典型的面向过程编程: 代码如下: ...
- php性能的问题
一.影响php性能的常见原因 1.php自身语法使用不当 2.php做了不擅长的时期() 3.php的周边环境(服务器Linux,磁盘:文件存储,数据库,缓存:内存,网络:带宽) 4.php自身的短板 ...
- How To Install Nginx on Ubuntu 16.04 zz
Introduction Nginx is one of the most popular web servers in the world and is responsible for hostin ...
- QQ分享 QQ空间分享 API链接:
QZone: "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={{URL}}&title={{TITL ...
- mysql中json数据的拼接方式
SELECT CONCAT('[', GROUP_CONCAT( CONCAT('{"id":"',STRUCTURE_ID,'"'),',', CONCAT( ...
- Jmeter-----随机生成手机号后8位并去重,来进行注册手机号的压测
要求:对注册接口进行100000次压测,手机号已126开头,后面的8位数不限 前言:在进行测试中,我们需要对注册接口进行压测100000次,那么就要求手机号码每次填写的不一致,否则手机号使用一次后会出 ...
- 寻找与网页内容相关的图片(二)reddit的做法
正如前文所述,内容聚合网站,比如新浪微博.推特.facebook等网站对于网页的缩略图是刚需.为了让分享的内容引人入胜,网页的图片缩略图是必不可少的.年轻人的聚集地.社交新闻网站reddit也是一个这 ...
- centos7.5安装seafile
1.配置yum源 [root@localhost yum.repos.d]# uname -r3.10.0-693.el7.x86_64 [root@localhost yum.repos.d]# c ...
- Jsonp方式和httpclient方式有什么区别?
jsonp基于js,解决跨域问题,本质发起ajax情求但是Jsonp只支持get请求. 它不安全,它先解析js,然后发起ajax请求,然后获取到返回值,通过浏览器返回,最后解析. JQuery和Spr ...
- Nodejs创建简单的Bot
官方文档地址:https://docs.microsoft.com/en-us/bot-framework/nodejs/bot-builder-nodejs-quickstart 前提: 1.你已经 ...