JavaScript 基础二

函数

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

         function fn(){
             console.log('我是函数')
         }
         fn();

         function getSum(a,b){
          return a +b;
        }
       console.log(getSum(1, 2));
  • 函数不调用自己不执行
  • 调用函数的时候,千万别忘了加小括号
  • 一次声明函数,可以调用多次
  • 封装,就类似打包

返回值

  1. 代码执行到return 关键字后,会跳出当前函数,后续与代码不再执行
  2. 函数的返回值是什么。调用这个函数就相当于调用了什么
  3. 没有返回值的函数相当于返回了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();
  1. 函数没有名字,我们称为匿名函数
  2. 这个fn 里面存储的是一个函数
  3. 这个执行的原理 跟我们 学的 变量使用一致的。
  4. 调用的方式 但是这个方式,函数调用必须写到函数体下面

自执行函数(了解)

  • 匿名函数可以作为启动函数,定义后立即自执行
    (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解析器首先会把当前作用域的函数声明提前到整个作用域的最前面
    • 变量名和函数名相同,优先执行 函数
  • 执行过程

    • 变量赋值、函数调用、表达式运算等等。
  1. 首先把所有的var function 进行代码提升。提升到当前作用域的最前面
  2. 变量提升的是声明并不赋值,函数只提升声明,并不调用。
      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代码独立出来封装成一个函数,这样可以提高代码的重复利用率,提高代码书写的效率,也可以有效的减少代码的冗余。
我们这个函数里面封装的对象, 为了和以前区别显示不同。 我们称为构造函数。

  1. 构造函数用于创建某一大类对象,首字母要大写。
  2. 构造函数要和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

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

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

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

(0)

相关推荐

  • 用一个例子理解JS函数的底层处理机制

    个人笔记,如有错误烦请指正 以下面代码的运行举例,一行行进行运行的解析 var x = [12, 23]; function fn(y) { y[0] = 100; y = [100]; y[1] = ...

  • 深入理解JavaScript作用域和作用域链

    目录 前言 作用域(Scope) 1.什么是作用域 2.全局作用域和函数作用域 3.块级作用域 作用域链 1.什么是自由变量 2.什么是作用域链 3.关于自由变量的取值 作用域与执行上下文 解释阶段: ...

  • JavaScript中的函数

    概念 函数就是封装了一段可被重复调用执行的代码块. 函数的使用分为两步:声明函数和调用函数. 函数声明 function fn() { console.log("hi") } 注意 ...

  • 闭包理解

    闭包 刚学过的闭包,分享一下闭包的理解 1.什么是闭包? 闭包就是一个函数,也可以说闭包是一个引用关系,可以理解为一个作用域可以访问另一个函数的局部变量. 代码: function fn() { va ...

  • 17K star 仓库,解决 90% 的大厂基础面试题

    前言 笔者开源的前端进阶之道已有三年之久,至今也有 17k star,承蒙各位读者垂爱.在当下部分内容已经略微过时,因此决定提笔翻新内容. 翻新后的内容会全部集合在「干爆前端」中,有兴趣的读者可以前往 ...

  • JavaScript基本语法(全)

    JavaScript JavaScript 是世界上最流行的语言之一,是一种运行在客户端的脚本语言 (Script 是脚本的意思) 脚本语言:不需要编译,运行过程中由 js 解释器( js 引擎)逐行 ...

  • Nice!JavaScript基础语法知识都在这儿了

    好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star ⭐⭐⭐⭐⭐转载请注明出处!⭐⭐⭐⭐⭐ 链接:https:/ ...

  • 「学习笔记」JavaScript基础

    前言 最近一直在跟着黑马教程学习JavaScript内容,遂把这一阶段的学习内容整理成笔记,巩固所学知识,同时也会参考一些博客,书籍上的内容,查漏补缺,给自己充充电

  • 全栈必备JavaScript基础

    1995年,诞生了JavaScript语言,那一年,我刚刚从大学毕业.在今年RedMonk 推出的2017 年第一季度编程语言排行榜中,JavaScript 排第一,Java 第二,Python 反超 ...

  • 二轮复习即将开始 一轮复习重基础 二轮复...

    二轮复习即将开始 一轮复习重基础 二轮复习重难点突破 做专题训练 小题小练 把重点难点列出来 逐个吃透 多做经典题 回归课本例题 搞懂解题逻辑 思维 而后练习变式 二轮复习 加油

  • 算法基础(二) 堆

    算法基础(二) 堆

  • 快速入门脑机接口:BCI基础(二)

    更多技术干货第一时间送达 关于脑机接口的分类可以查看<快速入门脑机接口:BCI基础(一)> 组成成分 脑活动 神经系统由两个主要部分组成:中枢神经系统和周围神经系统.大脑是中枢神经系统的主 ...

  • 小马哥-2020零基础JavaScript基础入门全套教程

    ┃  ┃  ┃  ┣━12-44 hasOwnProperty方法.mp4 ┃  ┃  ┃  ┣━9-5 作用域变量查找的机制(重要).mp4( i+ @) s# M6 w% S, w; M ┃  ┃ ...

  • JavaScript基础

    一 JavaScript 简介1 JavaScript基本介绍1 JavaScript 简称JS,是一种动态的弱类型脚本解释型语言,和HTML,CSS并成为三大WEB核心技术,得到了几乎所有主流浏览器 ...

  • 公共卫生主治医师-营养与食品卫生-营养学基础二|山河医学网

    公共卫生主治医师考试-营养与食品卫生-营养学基础二|山河医学网