Javascript 函数的四种调用模式

 更新时间:2016年11月05日 09:03:07   投稿:lqh  
这篇文章主要介绍了Javascript 函数的四种调用模式的相关资料,需要的朋友可以参考下

Javascript 函数的四种调用模式

1  函数模式

     最普通的函数调用

// 声明式函数
function fn1 () {
   console.log(this);
}
// 函数表达式函数
var fn2 = function() {
   console.log(this);
};
// 调用 函数中this表示全局对象,在浏览器中就是指window
fn1();   //window
fn2();   //window

 2 方法模式

     函数依附于一个对象,是对象的一个属性,我们再调用这个函数。这种模式就是方法调用模式。

var obj = {
  name: "zhangSan",
  sayHi: function () {
    console.log(this);
  }
};
obj.sayHi(); //obj对象

3 构造器调用模式

即是构造函数的调用,一般是通过new + 函数名( ),这种模式和以上的方法模式没本质的区别

function Person() {}
var tom = new Person(); // 这就是构造器函数的调用 

// 构造函数调用的详细过程
// 1 会在内部创建一个对象o
// 2 给对象赋值(this), 然后执行各种操作
// 3 返回这个对象o


// 构造函数的返回值:
 //
 //  有一个默认的返回值,新创建的对象(实例);
 //  当手动添加返回值后(return语句):
 //     1. 返回值是基本数据类型-->真正的返回值还是那个新创建的对象(即实例)
 //    2. 返回值是复杂数据类型(对象)-->真正的返回值是这个对象

4 上下文模式

本质--对象借用不属于该对象的方法(函数),即我们自定义this的指向

这时候就需要call和apply这两个方法

//Function.prototype.call ()
  //Function.prototype.apply ()
  //——>任何函数都可以调用call和apply方法

  // 第一个参数控制this的指向,第二个参数:
        在使用 上下文调用的 时候, 原函数(方法)可能会带有参数, 那么这个参数在上下文调用中使用 第二个( 第 n 个 )参数来表示
//伪数组
  var o={ 0:10,1:20,length:2 };

  //让o对象借用数组的push方法来添加元素
  //[].push.call(o,30,50,70)
  [].push.apply(o,[1,2,3])
  console.log(o);//其中对象o中length属性的值也会改变的哦

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

  • Web纯前端“旭日图”实现元素周期表

    Web纯前端“旭日图”实现元素周期表

    本文主要介绍了Web纯前端“旭日图”实现元素周期表的实例解析。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • JS实现的tab页切换效果完整示例

    JS实现的tab页切换效果完整示例

    这篇文章主要介绍了JS实现的tab页切换效果,涉及javascript基于事件响应动态操作页面元素属性相关操作技巧,需要的朋友可以参考下
    2018-12-12
  • JS实现双击编辑可修改状态的方法

    JS实现双击编辑可修改状态的方法

    这篇文章主要介绍了JS实现双击编辑可修改状态的方法,涉及javascript针对页面元素的动态创建及设置技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • Bootstrap零基础入门教程(二)

    Bootstrap零基础入门教程(二)

    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。这篇文章主要介绍了Bootstrap零基础入门教程(二) 的相关资料,非常不错,具有参考借鉴价值,感兴趣的朋友一起看下吧
    2016-07-07
  • JS实现汉字与Unicode码相互转换的方法详解

    JS实现汉字与Unicode码相互转换的方法详解

    这篇文章主要介绍了JS实现汉字与Unicode码相互转换的方法,结合实例形式较为详细的分析了javascript针对汉字与Unicode编码转换的操作技巧与相关注意事项,需要的朋友可以参考下
    2017-04-04
  • js实现文字头像的生成代码

    js实现文字头像的生成代码

    这篇文章主要介绍了js实现文字头像的生成的代码,代码简单易懂,非常不错,对大家的工作或学习具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • JS中正则表达式要注意lastIndex属性

    JS中正则表达式要注意lastIndex属性

    这篇文章主要介绍了JS中正则表达式要注意lastIndex属性,需要的朋友可以参考下
    2017-08-08
  • JS语法也可以有C#的switch表达式

    JS语法也可以有C#的switch表达式

    这篇文章主要为大家介绍了JS语法也可以有C#的switch表达式示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • JavaScript实现动态加载删除表格

    JavaScript实现动态加载删除表格

    这篇文章主要为大家详细介绍了JavaScript实现动态加载删除表格,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • 在微信小程序中使用mqtt服务的方法

    在微信小程序中使用mqtt服务的方法

    这篇文章主要介绍了在微信小程序中使用mqtt服务的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12

最新评论