集团主站
欢迎来到成都达内官方网站!达内—美国上市公司 亿元级外企IT培训企业!
成都it培训哪家好
成都it培训哪家好
全国服务监督电话:15023458194  |   联系客服   |
当前位置:主页 > 培训课程 > web前端 >

成都前端培训课程:JavaScript函数知识分享

发布者: 成都达内     浏览次数:     发布时间:2020-08-10 14:32:39

成都前端培训课程:JavaScript函数知识分享,函数:函数就是封装了一段可以重复执行的代码块。...

  函数:函数就是封装了一段可以重复执行的代码块。

  function fn(){

  console.log('我是函数')

  }

  fn();

  function getSum(a,b){

  return a +b;

  }

  console.log(getSum(1, 2));

  函数不调用自己不执行

  调用函数的时候,千万别忘了加小括号

  一次声明函数,可以调用多次

  封装,就类似打包

  返回值

  代码执行到return 关键字后,会跳出当前函数,后续与代码不再执行

  函数的返回值是什么。调用这个函数就相当于调用了什么

  没有返回值的函数相当于返回了undedined

  function fn2(){

  alert('fn2内部的代码')

  }

  console.log(fn2()) //先弹出'fn2内部的代码',然后控制台打印undefined

  小细节 : break ,continue ,return 的区别

  break 结束当前的循环体 (for while )

  continue 跳出本次循环,继续执行下次循环(for while )

  return 返回return 中的值 同时结束当前的函数体内的代码

  arguments的使用

  JavaScript中,arguments对象是比较特别的一个对象,实际上是当前函数的一个内置属性。也就是说所有函数都内置了一个arguments对象,arguments对象中存储了传递的所有的实参。arguments是一个伪数组,因此及可以进行遍历

  伪数组定义:

  a.具有length属性;

  b.按索引方式储存数据;

  c.不具有数组的push,pop等方法;

  当我们不确定有多少个参数传递的时候,可以用arguments 来获取

  定义函数有两种方式

  函数关键字自定义函数方式

  // 命名函数 有函数名 为 fn

  function fn() { ....}

  // 调用 那个地方调用都可以

  fn()

  函数表达式方式

  语法格式:

  // 这是 函数表达式 写法 匿名函数后面跟分号结束

  var fn = function () { .... };

  // 调用的方式 但是这个方式,函数调用必须写到函数体下面

  fn();

  函数没有名字,我们称为匿名函数

  这个fn 里面存储的是一个函数

  这个执行的原理 跟我们 学的 变量使用一致的。

  调用的方式 但是这个方式,函数调用必须写到函数体下面

  自执行函数(了解)

  匿名函数可以作为启动函数,定义后立即自执行

  (function () {

  alert('我是匿名函数,被自执行啦~~!');

  })();

  匿名函数自动执行写法的,最大的好处,就是 防止命名冲突, 这种函数永远不会冲突。

  值类型和引用类型

  基本类型

  var num1 = 10;

  var num2 = num1;

  num1 =20;

  console.log(num1); //20

  console.log(num2); //10

  栈速度比堆快。

  引用类型

  fnuction Person(name,age){

  this.name = name;

  this.age = age;

  }

  var p1 = new Person('zs',18);

  var p2 = p1; //复制引用

  p2.name = 'ls';

  console.log(p1.name); //ls

  console.log(p2.name); //ls

  作用域

  全局变量和局部变量

  全局作用域

  供所有代码执行的环境(整个script标签内部) 或者一个独立的js文件中

  局部作用域(函数作用域)

  会形成一个执行函数内代码的新环境。

  全局变量

  在全局作用域下声明的变量叫做全局变量(在函数外部定义的变量)

  全局变量在代码的任何位置都可以使用

  特殊情况, 再函数内 不var 声明 的 变量 也是全局变量 (不建议使用)

  局部变量

  在局部作用域下声明的变量叫做局部变量(在函数内部定义的变量)

  局部变量只能在该函数内部使用

  注意

  在函数内部不声明直接赋值使用的变量也算是全局变量

  函数的形参实际上就是局部变量

  局部变量当其所在的代码块被执行时,会被初始化,当代码块运行结束后,就被销毁了,节省内存空间。

  全局变量因为任何一个地方都可以使用,只有再浏览器关闭才会销毁,比较占内存。

  只要是代码,就至少有一个作用域

  写在函数外部的是全局作用域

  写在函数内部的局部作用域

  如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域。

  根据在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问。 就称作作用域链。

  局部变量,写在函数内部,当我们函数执行完毕后,里面的局部就会自动销毁,释放内存,比较节省资源。

  全局变量 只有浏览器关闭的时候才会销毁,比较浪费资源。

  作用域链:我们按照链式方式去查找,最终决定我们变量执行那个值的过程(就近原则)

  预解析

  JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript解析器在运行JavaScript代码的时候,分为两步:预解析和代码执行

  学习预解析能够让我们知道 为什么在变量声明之前访问变量 值是undefined 为什么在函数声明之前就可以调用函数

  预解析过程

  JavaScript解析器会在全局环境下查找 var、function关键字,变量只声明不赋值,函数声明不调用。

  预解析只发生在当前作用域下

  预解析也叫做变量、函数提升

  变量提升

  定义变量的时候,变量的声明会被提升到当前作用域的最上面,变量的赋值不会提升。

  函数提升

  JavaScript解析器首先会把当前作用域的函数声明提前到整个作用域的最前面

  变量名和函数名相同,优先执行 函数

  执行过程

  变量赋值、函数调用、表达式运算等等。

  首先把所有的var function 进行代码提升。提升到当前作用域的最前面

  变量提升的是声明并不赋值,函数只提升声明,并不调用。

  console.log(num2);

  var num2 = 20;

  //相当于执行了下面的代码

  var num2;

  console.log(num2); //undefined;

  num2 = 20;

  什么是对象?

  现实生活中:万物皆对象,对象是一个具体的事物。 看得见摸得着实物。一本书、一辆汽车、一个人都可以是“对象”,一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。

  对象调用:

  对象里面的属性调用 : 对象.属性名 这个小点 就理解为 的

  对象里面的属性另外调用方式 : 对象['属性名'] 注意 方括号里面的属性 必须加 引号 我们后面会用

  对象里面的方法调用: 对象.方法名() 注意这个方法名字后面一定加括号

  console.log(star.name) // 调用 名字属性

  console.log(star.age) // 调用 年龄属性

  star.sayHi(); // 调用 sayHi 方法 注意,一定不要忘记带后面的括号

  函数和方法的区别:

  函数是单独存在的, 调用的时候 函数名() 就可以了

  方法是再对象里面, 调用的时候,对象.方法名()

  new Object 创建对象

  var stuObj = new Obect();

  stuObj.name = 'james';

  stuObj.age = 11;

  stuObj.sex = true;

  stuObj.sayHi = function(){

  alert('大家好啊~');

  }

  跟我们前面学的 new Array() 一样。

  Object() 是构造函数 第一个字母大写

  new Object() 是调用构造函数 因为构造函数需要new 来调用 同时再内存中创建一个对象

  注意里面使用的时候用点 . 不是 冒号 :

  自定义构造函数

  我们可以和以前封装函数一样, 想创建多个对象,不用一个个的创造对象了。

  抽象可以将具有相同或相似功能的js代码独立出来封装成一个函数,这样可以提高代码的重复利用率,提高代码书写的效率,也可以有效的减少代码的冗余。

  我们这个函数里面封装的对象, 为了和以前区别显示不同。 我们称为构造函数。

  构造函数用于创建某一大类对象,首字母要大写。

  构造函数要和new一起使用才有意义。

  function Person(name, age, sex) {

  this.name = name;

  this.age = age;

  this.sex = sex;

  this.sayHi = function() {

  alert('我的名字叫:' + this.name + ',年龄:' + this.age + ',性别:' + this.sex);

  }

  }

  var bigbai = new Person('大白', 100, '男');

  var smallbai = new Person('小白', 21, '男');

  console.log(bigbai.name);

  console.log(smallbai.name);

  new在执行时会做四件事情

  new会在内存中创建一个新的空对象

  new 会让this指向这个新的对象

  执行构造函数里面的代码 目的:给这个新对象加属性和方法

  new会返回这个新对象 (所以构造函数里面不需要return)

  this详解

  JavaScript中的this指向问题,有时候会让人难以捉摸,随着学习的深入,我们可以逐渐了解

  现在我们需要掌握函数内部的this几个特点

  1. 函数在定义的时候this是不确定的,只有在调用的时候才可以确定

  2. 一般函数直接执行,内部this指向全局window

  3. 函数作为一个对象的方法,被该对象所调用,那么this指向的是该对象(谁调用指向谁)

  4. 构造函数中的this 对象的实例

  // 1. 普通函数

  function fn() {

  console.log(this); // this 指向 window

  }

  fn();

  // 2 对象方法

  var obj = {

  name: 'zs',

  dance: function() {

  console.log(this);

  that = this;

  }

  }

  obj.dance(); // this 指向 obj

  console.log(that === obj); // true

  // 3 构造函数

  function Fn() {

  this.age = '18';

  console.log(this)

  self = this;

  }

  var demo = new Fn(); // this 指向 demo

  console.log(self === demo); // true

  对象是封装了相关属性和方法的复杂数据类型

  本质:对象就是一组无序的相关属性和方法的集合

  注意: 函数用来按功能封装代码,对象用来按功能封装方法和属性,都起到复用代码和数据的作用。

(责任编辑:范老师)
最新开班
  • 成都Java培训班
    免费试听名额发放中...
  • 成都C++培训班
    免费试听名额发放中...
  • 成都PHP培训班
    免费试听名额发放中...
  • 成都网络工程培训班
    免费试听名额发放中...
  • 成都Unity3D培训班
    免费试听名额发放中...
  • 成都大数据培训班
    免费试听名额发放中...
  • 成都uid培训班
    免费试听名额发放中...
  • 成都会计培训班
    免费试听名额发放中...
  • 成都Python培训班
    免费试听名额发放中...
  • 成都嵌入式培训班
    免费试听名额发放中...
  • 成都web培训班
    免费试听名额发放中...
  • 成都软件测试培训班
    免费试听名额发放中...
在线留言
提交

校区地址:成都市锦江区东大街紫东楼端35号明宇金融广场19楼1906室

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市高新区奥克斯广场蜀锦路209号一楼商铺

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都锦江区东大街芷泉街229号东方广场C座3楼303

联系电话:15023458194

公交路线:芷泉街(188路;115路;515路;236路;505路;501路;84路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市武侯区佳灵路3号红牌楼广场2号写字楼11楼1115号

联系电话:15023458194

公交路线:红牌楼东(11路;92路;100路;111路;139路;g28路;快速公交K1/K2) 地铁路线:红牌楼站(地铁3号线)

校区地址:成都市锦江区红星路二段70号四川日报大厦502-2

联系电话:15023458194

公交路线:市二医院站(6路;49路;102路;5路;37路;g92路;) 地铁路线:地铁市二医院(地铁3号线)

校区地址:成都市锦江区东大街芷泉段229号东方广场C座16层

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:四川省成都市武侯区高新科技孵化园9号园区E座7楼

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都市高新区奥克斯广场B座1708

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

了解达内动态
关注成都达内教育公众号

首页 | 关于达内 | 课程中心 | 专家师资 | 视频教程 | 学员空间 | 校企合作 | 新闻资讯 | 就业指导 | 网站地图

2016-2025 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56