一.函数

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. MQTT和Coap

    什么是MQTT? MQTT是一个“发布和订阅”协议.用户可以订阅某些主题,或发布某些主题的消息.订阅者将收到订阅的主题消息.用户可以通过保证交付来配置协议更可靠. 什么是CoAP? CoAP看起来像是 ...

  2. java log4j 打日志到控制台同时打印到不同文件

    1.pom配置 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="htt ...

  3. Python网络编程、爬虫之requests模块使用

    一.python操作网络,也就是打开一个网站,或者请求一个http接口,使用urllib模块. urllib模块是一个标准模块,直接import urllib即可,在python3里面只有urllib ...

  4. MySQL之Python与Mysql交互

    一:Python操作MySQL步骤 1:Python中操作MySQL的步骤 2.引入模块 在.py文件中引入pymysql模块 import pymysql pymysql是python的一个第三方与 ...

  5. Java自学-数字与字符串 装箱和拆箱

    Java中基本类型的装箱和拆箱 步骤 1 : 封装类 所有的基本类型,都有对应的类类型 比如int对应的类是Integer 这种类就叫做封装类 package digit; public class ...

  6. Java自学-接口与继承 抽象类

    Java 抽象类 在类中声明一个方法,这个方法没有实现体,是一个"空"方法 这样的方法就叫抽象方法,使用修饰符"abstract" 当一个类有抽象方法的时候,该 ...

  7. Java自学-操作符 关系操作符

    Java的关系操作符 关系操作符:比较两个变量之间的关系 > 大于 >= 大于或等于 < 小于 <= 小于或等于 == 是否相等 != 是否不等 示例: public clas ...

  8. MFC中窗口重绘

    搬家于CSDN 2015-05-14 MFC提供了三个函数用于窗口重绘 InvalidateRect(&Rect) Invalidate() UpdateWindow() 当需要更新或者重绘窗 ...

  9. Beego学习笔记6:分页的实现

    实现分页的效果 1>     分页的实现的业务逻辑 1->每个页面显示N条数据,总的数据记录数M,则分页的个数为M%N==0?M/N:M/N+1; 2->页面渲染分页的html部分 ...

  10. 87.CSS Flex 弹性盒模型布局教程(共用的css在48篇文章gird)

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...