返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript基础之函数详解
  • 555
分享到

JavaScript基础之函数详解

2024-04-02 19:04:59 555人浏览 薄情痞子
摘要

目录一、函数简介1.1.函数的创建1.2.函数的参数和返回值二、函数的类型2.1. 构造函数2.2. 立即执行函数2.3. 构造函数的原型prototype2.4. 函数中的this

一、函数简介

1.1.函数的创建

1.函数创建的三种方式


    // 方式1:字符串封装代码创建函数
    var fun = new Function("console.log('hello 我是第一个函数');");
    console.log(fun);
    // 函数在被调用时执行
    fun()
    // 方式2:函数声明
    function fun2() {
      console.log(fun2)
    }
    fun2()
    // 方式3:函数表达式
    var fun3 = function () {
      console.log("我是匿名函数的封装的代码")
    };
    console.log(fun3)
    fun3();

1.2.函数的参数和返回值

1.函数的实参可以是一个对象或函数


    function mianji(r){
      return 3.14 * r * r;
    }
    function fun(a) {
      console.log("a = " + a)
    }
    fun(mianji(10))
    fun(mianji)

2.函数的返回值可以是一个对象或函数:


    function fun4(){
      function fun5(){
        alert("我是fun5")
      }
      return fun5;
    }
    a = fun4();
    console.log(a)   //输出fun5函数体
    a()   //输出"我是fun5"
    fun4()()   //输出"我是fun5"

二、函数的类型

2.1. 构造函数


    function Person(name, age, gender) {
      this.name = name;
      this.age = age;
      this.gender = gender;
      this.sayName = function () {
        alert(this.name)
      };
    }
    var per = new Person("张三", 15, "男")
    var per2 = new Person("李四", 16, "女")
    var per3 = new Person("王五", 17, "男")
    console.log(per)

构造函数执行流程:
1.立刻创建一个对象
2.将新建的对象设置为函数中this
3.逐行执行函数中的代码
4.新建的对象最为返回值返回
总结: 如上为构造函数,必须用new关键字调用,普通函数时直接调用,用this替代obj

2.2. 立即执行函数


    (function(){
      alert("我是一个匿名函数")
    })
    // 函数定义完,立即被调用,称为立即执行函数

2.3. 构造函数的原型prototype

1.javascript 规定,每一个构造函数都有一个prototype 属性。
2.构造函数通过原型分配的函数是所有对象所共享的
3.我们可以把那些不变的方法,直接定义在 prototype 对象上,这样所有对象的实例就可以共享这些方法。

简介:每一个对象都会有一个属性 proto 指向构造函数的 prototype 原型对象,实例对象使用构造函数 prototype 原型对象的属性和方法,因为对象有 proto 原型的存在。

对象原型的介绍

2.4. 函数中的this指向

1.当以函数的形式调用时,this是window;
2.当以方法的形式调用时,谁调用方法 this就是谁;
3.当以构造函数的形式调用时,this就是新创建的那个对象。

2.5. 函数对象原型的方法

1.Function.prototype.call():使用一个指定的 this 值调用一个函数(简单理解为调用函数的方式,但是它可以改变函数的 this 指向)
2.Function.prototype.apply() 方法调用一个函数。简单理解为调用函数的方式,但是它可以改变函数的 this 指向
3. Function.prototype.bind() 方法不会调用函数,但是能改变函数内部this 指向,返回的是原函数改变this之后产生的新函数


	 // 1.call方法
	 var o = {
	     name:"张美丽"
	 }
	 function fn(a,b) {
	     console.log(this);
	     console.log(a + b);
	   }
	 fn(1,3) //此时的this指向的是window 运行结果:3
	 fn.call(o,1,2) //此时的this指向的是对象o  运行结果:输出对象o和3
	 // 2.apply方法
	 var o = {
	     name:'andy'
	 }
	 function fn1(a,b) { 
	     console.log(this);
	     console.log(a + b)
	  }
	  fn()  //此时的this指向的是window 运行结果:3
	  fn.apply(o,[1,2])  //此时的this指向的对象o,运行结果:输出对象o和3
	 //  3.bind方法
	 var o = {
	     name:'andy'
	 }
	 function fn1(a,b) { 
	     console.log(this);
	     console.log(a + b)
	  }
	  var f = fn.bind(o,1,2)  //此处的f是bind返回的新函数
	  f()  //调用新函数  this指向的是对象o

2.6. 构造函数的继承

1.先定义一个父构造函数
2.再定义一个子构造函数
3.子构造函数继承父构造函数的属性(使用call方法)


	// 1.父构造函数
	function Father(uname) {
	  // this 指向父构造函数的对象实例
	  this.uname = uname;
	}
	// 2.子构造函数
	function Son(uname, age) {
	  // this指向子构造函数的对象实例
	  // 3.使用call方式实现子继承父的属性
	  Father.call(this.uname);
	  this.age = age;
	}
	var son = new Son('王帅帅', 18);  
	console.log(son);    // Son {age:18} 

2.7. 原型对象prototype方法继承


// 1.父构造函数
function Father(uname, age) {
  // this 指向父构造函数的对象实例
  this.uname = uname;
  this.age = age;
}
Father.prototype.money = function() {
  console.log(100000);
 };
 // 2.子构造函数 
  function Son(uname, age, score) {
      // this 指向子构造函数的对象实例
      Father.call(this, uname, age);
      this.score = score;
  }
// Son.prototype = Father.prototype;  这样直接赋值会有问题,如果修改了子原型对象,父原型对象也会跟着一起变化
  Son.prototype = new Father();
  // 如果利用对象的形式修改了原型对象,别忘了利用constructor 指回原来的构造函数
  Son.prototype.constructor = Son;
  // 这个是子构造函数专门的方法
  Son.prototype.exam = function() {
    console.log('孩子要考试');
  }
var son = new Son('王帅哥',18,100);
console.log(son);  //存在一个Father原型对象,在Father里面有age,uname,exam;money在fahter外层的原型对象里面。

2.8. Object.create实现类式继承


// 父类
function Shape() {
  this.x = 0;
  this.y = 0;
}
// 子类
function Rectangle() {
  Shape.call(this); // 调用父类的构造函数
}
// 将父类的原型对象,作为子类原型的原型对象。子类续承父类
Rectangle.prototype = Object.create(Shape.prototype);
// 设置子类原型的构造函数
Rectangle.prototype.constructor = Rectangle;
var r = new Rectangle();
r instanceof Rectangle;	// true
r instanceof Shape;		// true

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程网的更多内容!

--结束END--

本文标题: JavaScript基础之函数详解

本文链接: https://lsjlt.com/news/160403.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript基础之函数详解
    目录一、函数简介1.1.函数的创建1.2.函数的参数和返回值二、函数的类型2.1. 构造函数2.2. 立即执行函数2.3. 构造函数的原型prototype2.4. 函数中的this...
    99+
    2024-04-02
  • JavaScript基础学习之splice()函数详解
    目录splice()函数详解一、情况一(只有一个参数)二、情况二 (两个参数)三、情况三 (大于等于三个参数)总结splice()函数详解 splice() 方法向/从数组中添加/删...
    99+
    2024-04-02
  • JavaScript基础系列之函数和方法详解
    目录一、函数和方法的区别二、如何写好一个函数2.1 命名准确2.1.1 函数命名2.1.2 参数命名2.2 函数注释2.2.1 参数注释2.3  函数参数2.3.1 参数默...
    99+
    2024-04-02
  • javascript基础之数据类型详解
    目录1.数据类型1.1 为什么需要数据类型1.2 变量的数据类型1.3 数据类型分类2. 简单数据类型(基本数据类型)2.1 数字型Number1. 数字型进制2.数字型范围2.2 ...
    99+
    2024-04-02
  • python基础之匿名函数详解
    目录1.匿名函数介绍2.语法3.使用场景4.匿名函数和普通函数的对比5.匿名函数的多种形式6.lambda 作为一个参数传递7. lambda函数与python内置函数配合使用8.l...
    99+
    2024-04-02
  • Python之基础函数案例详解
    函数就是把具有独立功能的代码块封装成一个小模块,可以直接调用,从而提高代码的编写效率以及重用性, 需要注意的是, 函数需要被调用才会执行, 而调用函数需要根据函数名调用 ...
    99+
    2024-04-02
  • 详解Javascript基础之循环
    目录循环forfor-infor-ofwhiledo-while跳出循环总结循环 for 循环是任何一门语言都会有个命令,用于反复执行某段代码。 例如,循环代码块5次: for ...
    99+
    2024-04-02
  • JavaScript基础之立即执行函数
    目录立即执行函数格式立即执行函数其他方式–表达式立即执行函数可以带参数应用总结在JavaScript中有时候看到一些很神奇的函数比如下面截图: 这种函数只要浏览器加载的时候会自动运...
    99+
    2024-04-02
  • python基础之函数和面向对象详解
    目录函数函数参数变量作用域内嵌函数和闭包lambda 表达式面向对象三大特性类、类对象 和 实例对象类属性 和 对象属性私有魔法方法基本的魔法方法算术运算符属性访问 描述符...
    99+
    2024-04-02
  • Java基础之数组详解
    目录前言二.创建数组三.数组的使用四.数组的遍历五.数组作为方法的参数六.数组相关方法Arrays前言 我们了解数组这个概念之前,我们先思考下面几个问题。 如果我们需要两个数据,那么...
    99+
    2024-04-02
  • python基础之函数
    函数: # 什么是函数:一系列python语句的组合,可以在程序中运行一次或者多次 # 一般是完成具体的独立的功能 # 为什么要使用函数 # 代码的复用最大化以及最小化冗余代...
    99+
    2024-04-02
  • Golang函数基础概念详解
    随着现代编程语言的快速发展,Golang已经成为越来越多人的首选语言。而作为Golang语言中的基础概念之一的函数,更是为程序员们提供了强大的工具支持。本文将会详细解释Golang函数的定义、参数、返回值、作用域等基本概念,以及一些高级应用...
    99+
    2023-05-17
    函数 Golang 基础概念
  • Python基础之(七)函数
    建立函数 在Python中,规定了一种定义函数的格式,下面的举例就是一个函数,以这个函数为例来说明定义函数的格式和调用函数的方法。 def add_function(a, b): #冒号必须 c = a + b #缩进必须 ...
    99+
    2023-01-31
    函数 基础 Python
  • Javascript基础知识详解
    目录变量数据类型扩展点总结变量 基本语法 var age=10;//声明一个名称为age的变量,并且为它赋值,称为变量的初始化 var是一个JS关键字,用来声明...
    99+
    2024-04-02
  • Python基础学习之函数和代码复用详解
    目录Python函数和代码复用一、函数的定义二、函数的调用三、函数的参数传递1.形式参数与实际参数2.位置传参与关键字传参3.可变对象与不可变对象的参数传递4.个数可变的位置、关键字...
    99+
    2024-04-02
  • javascript之函数进阶详解
    目录函数定义方式函数的调用(6种)this指向问题严格模式高阶函数闭包递归:函数里面调用自己,需要有结束条件函数定义方式 function fn(){}//命名函数 var ...
    99+
    2024-04-02
  • JavaScript基础函数有哪些
    本篇内容介绍了“JavaScript基础函数有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! 一、时...
    99+
    2024-04-02
  • javascript函数式编程基础
    目录一、引言二、什么是函数式编程三、纯函数(函数式编程的基石,无副作用的函数)四、函数柯里化五、函数组合六、声明式和命令式代码七、Point Free八、示例应用九、总结 一、引言...
    99+
    2024-04-02
  • Python基础之数据结构详解
    目录一、列表1.1 列表更新元素1.2 列表增加元素1.3 列表删除元素1.4 列表的其他操作二、元组2.1 删除元组2.2 元组的其他操作三、字典3.1 字典删除元素3.2 字典的...
    99+
    2024-04-02
  • Python基础之数据类型详解
    目录一、整数二、浮点数三、复数四、运算符,优先级以及结合性五、混合类型计算六、除法七、十进制,八进制,十六进制和二进制八、位操作九、集合十、布尔类型十一、其他数值类型一、整数 pyt...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作