zoukankan      html  css  js  c++  java
  • 函数 对象 入门总结

    函数

    什么是函数

    函数是定义一次但可以调用或执行任意多次的一段JavaScript代码。

    函数也叫做方法(了解概念)

    当一个函数在一个对象上被调用的时候,这个函数就叫做方法。 此时, 它的调用所在的对象就会作为函数的一个隐式的参数来传递。

    // 函数
    function func() {
     
    }
     
    var obj = {
        age: 18,
        getAge: function() {
            // 方法
        }
    };
    //函数:是直接调用
    //方法:是通过对象调用的

    JavaScript中的函数能做什么?

    • 1 封装代码,实现代码复用(最基本的作用)
    • 2 作为数据来传递(回调函数)
    • 3 作为构造函数,创建对象
    • 4 作为一个作用域

    函数的语法

    // 函数声明的基本语法
    // function关键字、funcname、小括号、大括号都是必需的
    // 参数不是必需的
    function funcname([arg1 [,arg2 [..., argn]]]) {
        statements
    }
     
    // 函数调用语法:函数名后面跟运算符()来调用
    funcname();
    • 函数声明的注意点:

    1 函数声明不能出现在类似:if语句中(尽管不报错,但这是糟糕的做法!如果这么做了,容易出现混乱)

    2 funcname是要定义的函数名,必须是一个标识符(不要使用保留字或关键字),而不能是字符串或者表达式。

    3 包含在小括号中的0个或多个参数,参数用逗号隔开

    4 大括号内的是函数主体,包含了多条语句

    5 return语句,可有可无。

    6 函数命名推荐使用帕斯卡命名法,即第一个单词后的所有单词都以一个大写字母开始。

    函数参数

    //形参(函数声明时候的参数)
    function f(a, b) {} // a,b是形参,占位用,函数定义时形参无值
     
    //实参(函数调用时候的参数)
    var x = 5,
        y = 6;
    f(x, y); //x,y实参,有具体的值,会把x,y复制一份给函数内部的ab

     arguments介绍

    • 作用:保存函数的实际参数
    • arguments仅在函数内部有效。
    • arguments是一个伪数组(即,只是与数组类似,并非一个真正的数组)

    因为可以使用方括号语法访问它的每一个元素(即第一个元素是 arguments[0] ,第二个元素是 argumetns[1] ,以此类推),使用 length 属性来确定参数长度。 没有传递值的命名参数将自动被赋予 undefined 值,跟定义了变量但又没有初始化一样。

    function testArguments() {
      console.log("第一个参数为:" + arguments[0]);
    }
     
    testArguments("123"); // 第一个参数为:123

    函数表达式(函数直接量、函数字面量)

     基本语法

    // funcname 可以省略
    var func = function funcname() {
      statements
    };
    • 注意点:函数表达式中function后面的函数名,只能在函数内部使用;函数外部访问会报错!
    var func = function fun () {
        console.log(fun); // 函数体
    };
     
    func();
     
    console.log(fun); // Uncaught ReferenceError: fun is not defined

    函数表达式与函数声明的异同

    • 不同点:
      • 1 语法不同,函数表达式被用作表达式,而不是用作语句,而且也无需指定函数名
      • 2 函数表达式中,function后面的funcname可以省略
      • 3 函数声明整个函数都会被提升,函数表达式只有变量名被提升
    • 相同点:
      • 除了上述语法不同外,其他用法都相同。

     函数参数传递方式

    // 基本数据类型
    function add(num) {
        num = num + 10;
        return num;
    }
     
    var count = 20;
    var result = add(count);
    console.log("count的值为:" + count); // ??
    console.log("result的值为:" + result); // ??
     
    // 复杂数据类型
    // 1.
    function setAge(obj) {
        obj.age = 18;
    }
     
    var person = new Object();
    person.age = 30;
     
    setAge(person);
    console.log(person.age); // ??
     
    // 2.
    function setName(obj) {
        obj.name = "小明";
        obj = new Object();
        obj.name = "小红";
    }
     
    var person = new Object();
    person.name = "Jack";
     
    setName(person);
    console.log(person.name); // ??
    • JavaScript中所有函数的参数都是按值传递的。也就是说,把函数外部的值复制给函数内部的参 数,就和把值从一个变量赋值到另一个变量一样。
    • 参数实际上是函数的局部变量,那么这些局部变量(包括:函数参数、函数内部声明的变量), 在函数执行完毕后会被立即销毁掉。

    第三部分对象

    数据类型

    基本数据类型 string number boolean null undefined

    复杂数据类型 Object

    获取变量的数据类型: typeof 变量名  或者  typeof(变量名)

    基本类型(值类型)在栈中存储

    引用类型的对象在堆中存储,地址在栈中存储

    什么是对象

    对象其实就是一组数据和功能的集合    键值对的集合

    对象可以方便地描述和模拟客观事物

    • JavaScript中如何创建对象?
    // 创建一个对象
    var obj = new Object();
    // 给对象设置属性
    obj.name = "小明";
    obj.age = 18;

    2.1 什么是JavaScript对象

    JavaScript中的对象:无序属性的集合,其属性可以包含基本值、对象或者函数。
    严格来讲,这就相当于说对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字,
    而每个名字都映射到一个值。
    • 对象和基本类型的区别:
    对象与数字、字符串、布尔值这样的数据类型不同,它们不是表示一个单个的值,而是值的集合。
    对象是已命名值的一个集合。
    数字、字符串、布尔值是简单数据类型
    对象是复杂数据类型
    • 函数也是对象

    2.2创建对象的两种方式对比

    • 方式一:使用构造函数创建对象
    // 使用 new 操作符,后面跟 Object构造函数调用,来创建对象
    // 此时,返回值:obj,就是新创建出来的对象
    var obj = new Object();
    // 给对象添加属性
    obj.name = "静静";
    obj.age = 18;
    obj.getName = function () {
        return this.name; // 静静
    };
    • 方式二:使用对象字面量(推荐)
    // 语法规则
    var person = {
        // 属性名: 属性的值
        // 使用逗号来分隔不同的属性(如果当前属性后面还有其他属性的话)
        name: "Nicholas",
        age: 18
    };
     
    // 创建对象设置属性
    var person = {
        name: "加引号的属性名称",
        0: "属性名为数值类型,那么这里的数值属性名会自动转换为字符串"
    };
     
    // 创建一个空对象,没有任何属性
    var person = {};
    • 对象字面量的说明:
        1. 对象字面量是对象定义的一种简写形式,目的在于简化创建包含大量属性的对象的过程。
        2. 语法规则中,左边的花括号({)表示对象字面量的开始,因为它出现在了表达式上下文中。
        3. 对象字面量的属性名,可以不加引号 也可以加引号(单引号或者双引号都可以)

    2.3对象的基本操作

    2.3.1 属性的设置
    // 创建一个空对象
    var obj = {};
    // 使用点运算符(.)来设置属性的值
    obj.name = "这是name属性的值";
    obj.age = 18; // age属性设置值:18
    // 使用方括号[]来设置属性的值,注意:要访问的属性是字符串的形式或者是变量
    obj["font-size"] = "30px";
    2.3.2 属性的读取
    // 获取属性的两种方式
    console.log(obj.name);
    console.log(obj["name"]);
    区别:
        1. 都可以用来设置或者获取对象的属性。
        2. 方括号([])可以通过变量来访问属性。
        3. 属性名中包含会导致语法错误的字符,或者属性名使用的是关键字和保留字,使用方括号表示法。
           例如:obj["first name"],由于"first name"中包含一个空格,所以不能使用点表示法来访问它。
                 然后,属性名中是可以包含非字母非数字的,这时候就可以使用方括号表示法来访问它们。
        4. 除非必须使用变量来访问属性,否则推荐使用点表示法。
    2.3.3 属性的遍历
    • 如何获取对象的一个属性?
    • 如果要获取对象的所有属性,怎么获取?
      • for-in
    var obj = {
        name: "明哥",
        age: 18,
        weight: 50
    };
     
    for(var ob in obj) {
        // ob 为属性名
        // obj[ob] 为属性名对应的值
        console.log("属性 " + ob + " 的值为:" + obj[ob]);
    }

    2.4 如何创建自定义对象

    • 1 使用函数,函数名首字母大写(为了区分普通函数)(此时的函数叫做:构造函数)
    • 2 使用this关键字
    function Person(name, age) {
      this.name = name;
      this.age = age;
    }
     
    var p = new Person("猴哥", 18);
    console.log(p.name);
    console.log(p.age);
    • new 操作符的作用
      • 1 创建一个对象
      • 2 将构造函数的作用域赋给新对象, 所以this == p
      • 3 执行构造函数,为对象设置属性
      • 4 返回新对象
  • 相关阅读:
    Echarts之内嵌圆环图v5.1.2
    VueX+VueRouter+Cookie实现简单登录页
    命令行安装MySQL
    mysql常用语句
    网际互联及OSI七层模型:
    阿里ICON图标,使用教程
    前端开发小技巧整理
    SQL语句
    web笔记
    jQuery
  • 原文地址:https://www.cnblogs.com/fly-xfa/p/6583097.html
Copyright © 2011-2022 走看看