一.函数

1.函数是什么

  • 具有特定功能的n条语句的封装体。
  • 只有函数是可执行的,其它类型的数据是不可执行的。
  • 函数也是对象。

2.为什么要用函数

  • 提高代码复用
  • 便于阅读和交流

3.如何定义函数

  • 函数声明
  • 表达式
   function fun1(){
console.log("函数声明定义函数");
} var fun2 = function(){
console.log("表达式定义函数")
}

4.如何调用函数

  • test()
  • new test()
  • obj.test()
  • test.call(objx)/test.apply(objx)
   function fun(){
console.log("fun执行");
} //1.函数自调用,相当于window.fun()调用方式
fun(); //2.回调函数:事件回调,定时器回调
document.getElementById("btn").onclick = function(){
console.log("事件回调");
} setTimeout(function(){
console.log("定时器回调");
},1000); //3.构造函数:实例化对象调用(this指向当前构造函数的实例对象)
function Person(name,age){
this.name = name;
this.age = age;
} var person1 = new Person('小红',17); //4.call,apply强制绑定this
var obj1 = {name:"obj1"};
function fun2(){
console.log(this);//用于输出当前this所绑定的对象
} fun2(); //this = window
fun2.call(obj1); //this = Object {name: "obj1"}
fun2.apply(obj1); //this = Object {name: "obj1"}

5.回调函数

(1)什么函数是回调函数

  • 你定义的
  • 你没有直接执行
  • 最终他执行了(在特定条件下)

(2)常见的回调函数

  • DOM事件函数
  • 定时器函数
  • ajax回调函数
  • 生命周期回调函数
   document.getElementById("btn").onclick = function(){
console.log("DOM事件回调");
} setTimeout(function(){
console.log("定时器回调");
},1000);

6.IIFE

全称: Immediately-Invoked Function Expression

别名:函数自调用,立即执行函数,IIFE

特点:

  • 只执行一次
  • 代码执行到函数是,此函数就执行了
  • 函数的数据是私有的

7.this

  • this是关键字,不能用来定义对象
  • this本身是一个内置的变量,该变量指向一个对象
  • this有两种:
    • 全局this:指向window
    • 局部(函数)this:指向它的调用者(例如:构造函数的this指向实例对象)
  • 特殊this:call,apply强制修改this
 function fun1(){

   console.log("外部fun1:");
console.log(this);
this.name = "小红"; } var obj = {
fun2: function(){
console.log("内部fun2:");
console.log(this);
}
} window.fun1(); // this = window
new fun1(); // this = 实例对象(fun1{})
fun1.call(obj); //this = obj

注:使用new 操作符执行步骤:

语法:new fun1();

  1. 创建空对象
  2. 执行函数
  3. 确认this指向
  4. 返回执行结果:fun1{} 给空对象

此图可以看出new fun1();首先创建一个空对象去指向这个fun1,再给予this的name属性创建并赋值。

JS函数基础的更多相关文章

  1. js函数基础回顾

    回头又跑去看了下尚硅谷的js基础视频 https://www.bilibili.com/video/av22958172/?p=51. 便做了如下笔记: 1.函数也是一个对象 2.函数可以封装一些功能 ...

  2. js函数基础知识

    [函数的声明及调用] function 函数名(参数1,参数2,....){ //函数体代码 return返回值: } 1.函数的调用: ①直接调用:函数名(参数1的值,参数2的值,....) ②事件 ...

  3. js 函数基础(方便复习使用)

    // 函数声明: function bbq(){ // ..... } // 函数表达式: // 1.命名函数表达式 var test = function abc(){ document.write ...

  4. JS 函数基础

    函数简介 函数 函数也是一个对象 函数中可以封装一些功能(代码),在需要时可以指向这些功能(代码) 函数中可以保存一些代码在需要时调用 使用typeof检查一个函数对象时,会返回function 创建 ...

  5. Js函数function基础理解

    正文:我们知道,在js中,函数实际上是一个对象,每个函数都是Function类型的实例,并且都与其他引用类型一样具有属性和方法.因此,函数名实际上是指向函数对象的指针,不与某个函数绑定.在常见的两种定 ...

  6. 100多个基础常用JS函数和语法集合大全

    网站特效离不开脚本,javascript是最常用的脚本语言,我们归纳一下常用的基础函数和语法: 1.输出语句:document.write(""); 2.JS中的注释为//3.传统 ...

  7. JavaScript基础精华02(函数声明,arguments对象,匿名函数,JS面向对象基础)

    函数声明 JavaScript中声明函数的方式:(无需声明返回值类型) function add(i1, i2) {             return i1 + i2;//如果不写return返回 ...

  8. 基础常用JS函数和语法

    100多个基础常用JS函数和语法集合大全  来源:http://www.cnblogs.com/hnyei/p/4605103.html 网站特效离不开脚本,javascript是最常用的脚本语言,我 ...

  9. (day65、66)Vue基础、指令、实例成员、JS函数this补充、冒泡排序

    目录 一.Vue基础 (一)什么是Vue (二)为什么学习Vue (三)如何使用Vue 二.Vue指令 (一)文本指令 (二)事件指令v-on (三)属性指令v-bind (四)表单指令v-model ...

随机推荐

  1. SPA单页面应用和MPA多页面应用(转)

    原文:https://www.jianshu.com/p/a02eb15d2d70 单页面应用 第一次进入页面时会请求一个html文件,刷新清除一下,切换到其他组件,此时路径也相应变化,但是并没有新的 ...

  2. framework7 总结之前遇到的问题和踩过的坑

    官网上写的案例比较简单明了,我这里就将我使用时踩过的坑做一个总结,与大家共勉! 最近使用framework,基本全靠浏览官方文档,当然,有遇到了许多的错误,开始不知道哪里出问题也很着急,到最后发现问题 ...

  3. 怎样调节Eclipse中的字体大小?

    window->perference->appearance->colors and font->text font edit

  4. C#使用表达式树动态调用方法并实现99乘法表

    我们在使用C#编程的时候,经常使用反射来动态调用方法,但有时候需要动态的生成方法,下面介绍使用表达式树的方式来自动生成方法,并调用. 首先需要说明什么是表达式,熟悉Linq的程序猿都用过类似于下面的代 ...

  5. 《C++ Primer》学习总结;兼论如何使用'书'这种帮助性资料

    6.25~ 6.27,用了3天翻了一遍<C++ Primer>. ▶书的 固有坏处 一句话: 代码比 文字描述 好看多了.————> 直接看习题部分/ 看demo就行了 看文字在描述 ...

  6. 使用Nginx 对Laravel 进行负载

    项目环境php7.2, nginx , Laravel,开发的微信公众号应用 .目前访问量的上升,单台服务器不能满足需求,于是用nginx做了负载.以下是一种可行性方案,目前正在使用. session ...

  7. 原生JS实现前端动画框架

    封装了一个JS方法,可支持块元素的常规动画:高.宽.透明度.位置等,同时支持链式动画和同时运动,参照imooc整理,具体代码如下: /** * 获取HTML元素属性值 * obj是Element, a ...

  8. js中 !==和 !=的区别是什么

    1.比较结果上的区别 !=返回同类型值比较结果. !== 不同类型不比较,且无结果,同类型才比较. 2.比较过程上的区别 != 比较时,若类型不同,会偿试转换类型. !== 只有相同类型才会比较. 3 ...

  9. 【转载】C#中ArrayList集合类使用RemoveAt方法移除指定索引的元素

    ArrayList集合是C#中的一个非泛型的集合类,是弱数据类型的集合类,可以使用ArrayList集合变量来存储集合元素信息,任何数据类型的变量都可加入到同一个ArrayList集合中,在Array ...

  10. 【转载】Windows系统电脑通过命令msinfo32查看系统信息

    在Windows操作系统中,可以使用msinfo32的操作命令查看操作系统相关信息,通过msinfo32命令可以查看到系统摘要,包括硬件资源.组件.软件环境等系统信息.其中系统摘要包括冲突/共享.DM ...