Skip to content

Latest commit

 

History

History
205 lines (137 loc) · 5.34 KB

03-函数和自定义属性.md

File metadata and controls

205 lines (137 loc) · 5.34 KB

第三章 函数和自定义属性

1.函数

  • 什么是函数：将一系列代码或者操作行为打包到一起形成的东西就是函数，一块有特定功能得代码

写法：

function foo(){}
console.log(foo）//ƒ foo(){}

代码中function和var let const一样，是申明变量的关键字，function也是申明变量的关键字，而foo就是函数的名字，指代的就是这个函数

  • 具名函数： 有函数名得函数，能通过函数直接找打函数 匿名函数： 没有写函数名得函数，通常直接写出来不行，无法调用，除非赋值给变量或者触发执行或者立即执行
function foo(){}//具名函数
document.onclick = function(){};//匿名函数
  • 函数得调用，也就是执行。

函数后面添加括号执行：

function foo(){console.log("foo执行了")}
foo()//函数调用，执行，在控制台打印。。。函数执行默认返回undefined，同赋值操作
function(){console.log("匿名函数错误执行方法")}()//此时会报错: 
//需要将匿名函数用()包裹
(function(){console.log("匿名函数正确执行方式，也叫IIFE")})();//打印。。。

匿名函数执行需要将匿名函数用()包裹，后面讨论

  • 函数声明和函数表达式
function foo1(){}//函数声明
var foo2 = function(){};//函数表达式

两者得区别：

​ 函数声明是声明函数，类似于声明变量

​ 函数表达式是声明变量然后赋值操作，两者含义不一样

函数表达式立执行方法：

var foo3 = function(){}();//不会报错，但是当前foo3是undefiend,为啥？

2.函数参数

没有参数得函数没有灵魂，在任何情况下，执行函数都会进行相同得操作(不考虑随机)。我们需要在不同条件下执行函数有不同得结果，可以给函数传参：

function say(mood){console.log(`我今天得心很${mood}`)}
say("好");//"我今天心情很好"
say("糟糕");//"我今天得心情很糟糕"

函数中传进去得叫参数，让函数可以以不同得状态或者需求执行，参数写到函数名后面得括号中，上面例子中函数得参数有两种： mood是一种，"好"和"糟糕"是一种，这两个是什么

实参： 实际存在得参数，字符串或者数字，对象等变量都可以当参数传入函数种，在函数调用得时候填写

形参： 和变量类似，用来装载调用函数得代号，在函数声明得位置填写

实参可以传多个，形参可以写多个，可以不对齐 .

形参默认值：

function foo(a = 0, b = 2){
    console.log(a, b);
}
foo(1);//1 2
foo(undefined,3);//0 3
//当有形参默认值的时候，且实参没写或者未undefined时会使用默认值

3.return 关键字

数学意义上得函数是描述数学种变量之间得关系，一种依赖关系:y=f(x)在定义域每个x都有y值与之对应。

在JS种函数也可以描述这种对应得关系: 每次执行函数后会返回对应得值，用return关键字返回

function foo1(){}
foo1();//undefined
function foo2(){return undefined;}
foo2();//undefined，和foo1有啥区别?
function foo3(){return "这次不是undefined了！"}
foo3();//"这次不是undefined了！"

函数执行完成之后会默认返回undefined，我们也可以主动返回undefined，但是返回了之后后续得代码就不会执行了。

var double = function(x){
    console.log("double开始执行")
    return x*x；
    console.log("返回了执行得结果")
}
double(3);//"double开始执行" 9
//这就是一个典型得y=x*x得二次函数(数学意义上得)

还可以返回一些其他得东西，比如：

function foo(){
    let sum=0;
    return function(y){
        sum += y
        return sum; 
    }
}
var add = foo();//add是啥？foo返回了啥？add有啥用？

这个后面再讨论

4.自定义属性、自定义标签属性、h5规范下的自定义标签属性

自定义属性，复杂对象都可以设置自定义属性，通过.访问或者[]访问

let fn = function(){};
fn.mood = "good!";//对象存在，设置属性不需要申明
let name = "mood";
console.log(fn.mood,fn["mood"],fn[name]);//"good!" "good!" "good!"

[]访问属性时属性名是字符串，可以是变量。

合法的对象属性：系统自带的属性： 比如window.alert;console.log等等

自定义标签属性：

​ 在标签内自定义的属性

<div class='box' ys='asd'></div>
<script>
	let box = document.getElementsByClassName("box")[0];
    console.log(box.ys);//undefined
</script>

标签元素的自定义标签属性在JS环境里无法直接访问，也无法直接修改

有专门的访问修改的方法

//接上
box.getAttribute("ys");//"asd" 查找
box.setAttribute("ys","zxc");//修改，增加
box.removeAtrribute("ys");//删除

这是文档对象自带的方法

5.箭头函数

let fn = function(n){
    return n+1
}
fn(2);//3
let fn2 = n => n + 1;
fn(2);//3

箭头函数是函数表达式的简单写法，有很多功能默认箭头后面是返回

多个参数需要加小括号，多个执行语句需要大括号括起来，有大括号默认返回undefined需要手动指定返回。

let fn3 = (x,y)=>{x+=3;return x*y}
fn3(1,2);//8

单挑语句直接加括号返回，特殊情况可以省略

let add = (a,b) => a+b;