方法调用模式:

当一个函数被保存为对象的一个属性时,我们称它为一个方法。当一个方法被调用时,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关键字的区别的更多相关文章

  1. JS面向对象函数的四种调用模式

    函数的四种调用模式 概念 在 js 中,无论是函数, 还是方法, 还是事件, 还是构造器,...这些东西的本质都是函数 函数, 方法, 事件, 构造器,...只是所处的位置不同 这四种模式分别是 函数 ...

  2. 函数的四种调用模式.上下文调用.call.apply

    闭包:函数就是一个闭包,一个封闭的作用域;         返回函数,要返回多个函数就用一个对象封装一下,         立即执行函数+return 回调函数   JS动态创建的DOM,不会被搜索引 ...

  3. javascript中函数的四种调用模式详解

    介绍函数四种调用模式前,我们先来了解一下函数和方法的概念,其实函数和方法本质是一样,就是称呼不一样而已.函数:如果一个函数与任何对象关系,就称该函数为函数.方法:如果一个函数作为一个对象属性存在,我们 ...

  4. JS函数的四种调用模式

    函数在js中具有四种身份,分别为函数.方法.构造函数.apply或call调用 函数调用    函数调用模式中this指全局对象(window) var f1 = function() { alert ...

  5. javascript 函数的4种调用模式

    1. 函数模式 // this 指向 window 全局对象 2. 方法模式 // this 指向调用这个方法的对象 3. 构造函数模式 // this 指向 new 新创建出来的实例 4. 上下文模 ...

  6. js高级-函数的四种调用模式

    1.对象方法调用模式  方法内部的this指向当前调用者的对象d 定义类 (构造函数) function Dog (dogName){ //创建一个空对象   让空对象==this this.name ...

  7. javascript this 代表的上下文,JavaScript 函数的四种调用形式

    JavaScript 是一种脚本语言,支持函数式编程.闭包.基于原型的继承等高级功能.其中JavaScript 中的 this 关键字,就是一个比较容易混乱的概念,在不同的场景下,this会化身不同的 ...

  8. JavaScript (JS) 函数补充 (含arguments、eval()、四种调用模式)

    1. 程序异常 ① try-catch语法    测试异常 try-catch语法代码如下: try { 异常代码;     try中可以承重异常代码, console.log(“try”)  出现异 ...

  9. JavaScript高级之函数的四种调用形式

    主要内容 分析函数的四种调用形式 弄清楚函数中this的意义 明确构造函对象的过程 学会使用上下文调用函数 了解函数的调用过程有助于深入学习与分析JavaScript代码. 本文是JavaScript ...

随机推荐

  1. [ python ] 小脚本及demo-持续更新

    1.  备份文件并进行 md5 验证 需求分析: 根据需求,这是一个流程化处理的事件. 检验拷贝文件是否存在,不存在则执行拷贝,拷贝完成再进行 md5 值的比对,这是典型的面向过程编程: 代码如下: ...

  2. php性能的问题

    一.影响php性能的常见原因 1.php自身语法使用不当 2.php做了不擅长的时期() 3.php的周边环境(服务器Linux,磁盘:文件存储,数据库,缓存:内存,网络:带宽) 4.php自身的短板 ...

  3. 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 ...

  4. QQ分享 QQ空间分享 API链接:

    QZone: "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={{URL}}&title={{TITL ...

  5. mysql中json数据的拼接方式

    SELECT CONCAT('[', GROUP_CONCAT( CONCAT('{"id":"',STRUCTURE_ID,'"'),',', CONCAT( ...

  6. Jmeter-----随机生成手机号后8位并去重,来进行注册手机号的压测

    要求:对注册接口进行100000次压测,手机号已126开头,后面的8位数不限 前言:在进行测试中,我们需要对注册接口进行压测100000次,那么就要求手机号码每次填写的不一致,否则手机号使用一次后会出 ...

  7. 寻找与网页内容相关的图片(二)reddit的做法

    正如前文所述,内容聚合网站,比如新浪微博.推特.facebook等网站对于网页的缩略图是刚需.为了让分享的内容引人入胜,网页的图片缩略图是必不可少的.年轻人的聚集地.社交新闻网站reddit也是一个这 ...

  8. centos7.5安装seafile

    1.配置yum源 [root@localhost yum.repos.d]# uname -r3.10.0-693.el7.x86_64 [root@localhost yum.repos.d]# c ...

  9. Jsonp方式和httpclient方式有什么区别?

    jsonp基于js,解决跨域问题,本质发起ajax情求但是Jsonp只支持get请求. 它不安全,它先解析js,然后发起ajax请求,然后获取到返回值,通过浏览器返回,最后解析. JQuery和Spr ...

  10. Nodejs创建简单的Bot

    官方文档地址:https://docs.microsoft.com/en-us/bot-framework/nodejs/bot-builder-nodejs-quickstart 前提: 1.你已经 ...