JavaScript函数function

「爱情、让人受尽委屈。」 2023-10-06 17:11 158阅读 0赞

函数function

函数也是一个对象
使用typeof检查时，会返回”function”

  1. var fun =new Function();
  2. console.log(typeof fun);//"function"

定义

1、使用函数声明创建函数
语法：function 函数名(形参…){ }
调用:函数名()
2、 使用函数表达式创建函数
var fun = function (形参…){
console.log(“匿名函数”)
}
调用:fun()

调用

fun()//直接调用
obj.fun//通过对象调用
new fun()//new调用
fun.call(obj)或fun.apply(obj)//相当于obj.fun()，但是这只是临时让fun成为obj的方法调用
在这里插入图片描述

参数可以是一个对象

  1. var fun =function(o){
  3.     console.log(o.name+o.age+o.address);
  4. }
  5. var obj={
  7.     name:'黑寡妇',
  8.     age:25,
  9.     address:'美国'
  10.     }
  11. fun(obj)

回调函数

  1. 1.什么函数才是回调函数?
  2.     1).你定义的
  3.     2).你没有调
  4.     3).但最终它执行了
  5. 2.常见的回调函数? 
  6.     dom事件回调函数
  7.     定时器回调函数
  8.     Ajax回调函数
  9.     生命周期回调函数

在这里插入图片描述

IIFE立即函数（匿名函数自调用）

隐藏实现
不会污染外部（全局）命名空间

  1. <script>
  2.     // 立即执行函数
  3.     // 函数定义完，立即被调用，这种函数叫做立即执行函数
  4.     // 立即执行函数往往只会执行一次
  5.     (
  6.         function(){
  8.             alert("你好帅啊");
  9.         }
  10.     )();
  11.     (
  12.         function(a, b){
  14.             alert(a+b);
  15.         }
  16.     )(12,23);
  17. </script>

在这里插入图片描述

构造函数

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <script>
  7.             /*    
  8.             创建一一个构造函数，专门]用来创建Person对象的
  9.             构造函数就是一个普通的函数，创建方式和普通函数没有区别，
  10.             不同的是构造函数习惯上首字母大写
  11.             构造函数和普通函数的区别就是调用方式的不同!
  12.             普通函数是直接调用，而构造函数需要使用new关键字来调用
  13.             */
  14.             /*
  15.             创建构造函数的过程
  16.             1.立刻创建一个新的对象
  17.             2.将新建的对象设置为函数中this ,在构造函数中可以使用thi s来引用新建的对象
  18.             3.逐行执行函数中的代码
  19.             4.将新建的对象作为返回值返回
  21.             */
  22.             function Person(Name, Age) {
  24.                 this.name = Name;
  25.                 this.age = Age;
  26.                 this.personfun=fun;
  27.             }
  28.             function fun(){
  30.                 alert("将personfun方法在全局作用域中定义"+this.name)
  31.             }
  32.             var per = new Person("王二毛",18);
  33.             console.log(per);
  34.             per.personfun();
  35.             /*使用instancof可以检查一个对象是不是一个类的实例*/
  36.             console.log(per instanceof Person)
  37.         </script>
  38.     </head>
  39.     <body>
  40.     </body>
  41. </html>

在这里插入图片描述

函数的方法 call(),apply()

这两个方法都是函数对象的方法，需要通过函数对象来调用
当对函数调用call( )和apply( )都会调用函数执行
-在调用call( )和apply()可以将一个对象指定为第一个参数
此时这个对象将会成为函数执行时的this

call( )方法可以将实参在对象之后依次传递
apply( )方法需要将实参封装到一个数组中统- -传递

this的情况
1.以函数形式调用时，this永远都是window
2.以方法的形式调用时，this是调用方法的对象
3.以构造函数的形式调用时，this是新创建的那个对象
4.使用call和apply调用时，this是指定的那个对象
fun.call(obj);
fun.apply(obj);

call()

fun.call(obj,1,3);

  1. var obj = {
  2.     }
  3. function test2() {
  5.     this.xxx = 'atguigu';
  6. }
  7. //obj. test2()不能直接， 根本就没有
  8. test2.call(obj); // obj. test2() // 可以让一个函数成为指定任意对象的方法进行调用
  9. console.log(obj.xxx);//atguigu

apply()

argument

在调用函数时，浏览器每次都会传递进两个隐含的参数:
1.函数的上下文对象this
2.封装实参的对象arguments
arguments是一个类数组对象,它也可以通过索引来操作数据，也可以获取长度
在调用函数时，我们所传递的实参都会在arguments中保存
arguments . length可以用来获取实参的长度
-我们即使不定义形参，也可以通过argument s来使用实参，
只不过比较麻烦
arguments[e]表示第一 个实参
arguments[1]表示第二个实参。
-它里边有一个属性叫做callee,
这个属性对应一个函数对象， 就是当前正在指向的函数的对象

Date

Math

包装类

函数中的this

1、this是什么?

  • 任何函数本质上都是通过某个对象来调用的，如果殴有直接指足就是window
  • 所有函数内部都有一个变量this
  • 它的值是调用函数的当前对象

2、如何确定this 的值?

  • test()//: window
  • p.test()//: p
  • new test()//: 新创建的对象
  • p.call(obj)//: obj

函数的prototype

1.函数的prototype属性

  • 每个函数都有一个prototype属性， 它默认指向object空对象(即称为:原型对象)
  • 原型对象中有一个属性constructor,它指向函数对象
    2.给原型对象添加属性( 一般都是方法)

  • 作用:函数的所有实例对象自动拥有原型中的属性(方法)
    在这里插入图片描述

    1. 每个函数function都有一个prototype， 即显式原型
      2.每个实例对象都有一个 proto ，可称为隐式原型
    2. 对象的隐式原型的值为其对应构造函数的显式原型的值
    3. 内存结构(图)
    4. 总结:
      函数的prototype属性:在定义函数时自动添加的，默认值是一个空0bject对象 对象的proto 属性:创建对象时自动添加的。默认值为构造函数的prototype属性值
      *程序员能直接操作显式原型，但不能直接操作隐式原型(ES6之前)

在这里插入图片描述

原型链

  1. <!--
  2. 1、原型链(图解)
  3.     *访问一个对象的属性时，
  4.     *先在自身属性中查找，找到返回
  5.     如果没有再沿着_ proto__ 这条链向 上查找，找到返回
  6.     *如果最终没找到，返@undefined
  7.     *别名:隐式原型链
  8.     *作用:查找对象的属性(方法)
  9. 2. 构造函数/原型/实体对象的关系(图解)
  10. 3. 构造函数/原型/实体对象的关系2(图解)

在这里插入图片描述

  1. 1. 读取对象的属性值时:会自动到原型链中查找
  2. 2. 设置对象的属性值时:不会查找原型链，如果当前对象中没有此属性， 直接添加此属性并设置其值
  3. 3. 方法一 -般定义在原型中，属性-般通过构造函数定义在对象本身上

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

instanceof

  1. 1. instanceof. 是如何判断的?
  2.     表达式: A instanceof B
  3.     *如果B函数的显式原型对象在A对象的原型链上,返回true, 否则返回false
  4. 2. Function是通过new自己产生的实例

在这里插入图片描述
在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，158人围观）

还没有评论，来说两句吧...

相关阅读

    相关 javaScript函数Function类型

    总结一下java Script的function类型的有关主要属性 我把主要的东西浓缩为几句话，方便自己的记忆，又需要的朋友也可以帮忙指证一下。 “函数是对象，函数名是

    电玩女神电玩女神/ 0 赞/ 332 阅读