Front-end js-function
One, the basic use of functions
1 Use of functions as parameters
<script>
// 函数作为参数 使用
function fn1(start, end, check) {
for (let i = start; i < end; i++) {
if (check(i)) {
document.write(i + "<br/>") } } }
function check(i) {
if (i % 3 == 0) {
return true
} else {
return false
}
}
fn1(10, 100, check)
</script>
2. Use of arguments
// arguments.length 检测参数的个数
function arg(X, Y) {
// alert(arguments.length)
}
arg(1)
// 使用arguments 求和
function add() {
let defaults = 0
alert(arguments)
for (let i = 0; i < arguments.length; i++) {
defaults += arguments[i]
}
return defaults
}
alert(add(1, 3, 4, 45, 5, 6, 7, 787))
Two, this explanation
// 1、 全局this指向window
console.log(this);
var x = 100;
console.log(window.x)
// 2、函数内部的this指向
function inside() {
var x = 20;
console.log(x) //20
console.log(this.x) //100
console.log(this) // window
}
inside()
// 3、使用new函数的this
function Constructor() {
this.x = 2000
}
let news = new Constructor()
console.log(news.x) // 2000
//作为某一个对象的方法中的this
let obj = {
x: 9999,
m: function () {
console.log(this) //{x: 9999, m: ƒ}
console.log(this.x) // 9999
}
}
obj.m()
//事件中监听的函数中的this
let click = document.getElementById('btn') //this 指向当前div元素
click.onclick = function () {
this.innerHtml = '我改变了！！！'
console.log(this) //<button id="btn">点击我！！！！</button>
}
Three, the properties and methods of the function
// 第二节函数的属性以及方法
// 1、函数的两个属性：length、protype
// 2、每个函数都包含两个非继承而来的方法：apply() call()
function fn(a, b, c) {
console.log(fn.length)//3 // 表示的是函数的形参个数
console.log(arguments.length)//1 //表示实参个数
}
fn(1)
//apply 、call 基本案例讲解
function flat(a, b) {
alert(a + b)
}
function flat2(a, b) {
return flat.apply(this, [a, b]) //apply 参数一：需要改变的 作用域(必填) 参数二:数组或者arguments
}
flat(20, 30) //50
flat2(30, 60) //90
var corlor = 'red'
let ob = {
corlor: "green" }
function getcall() {
console.log(this.corlor)
console.log(arguments)
}
getcall() // red
getcall.call(ob, 120145) // green //apply 参数一：需要改变的 作用域(必填) 参数二:参数列表
Four, data type
1. Basic types: undefault, boolaren, number, string, null
2. Reference types: object, array, function
// 基本类型案例（基本类型复制了值的本身）
let k = 20;
let s = k
console.log(k + "\n" + s) // 20 20
k = 30;
console.log(k + "\n" + s) // 30 20
// 引用类型案例(引用类型复制 的是地址)
let objects = {
}
objects.name = "张三" //objects指向了栈 内存的空间地址
let objects2 = objects //objects2获得objects 的指向地址
console.log(objects, "++++++", objects2) // 张三 张三
objects.name = '历史'
// 补充：函数的参数都是按值来传递 的
var m = 6666;
function box(m) {
m += 4444
return m
}
Five, execution environment and scope
var all = '全局变量'
console.log(all)//全局变量
console.log(window.all)//全局变量(最外围，属于window属性)
function nick() {
return '全局函数'
}
console.log(nick()) //全局函数
console.log(window.nick()) //全局函数(最外围，属于window方法)
var banner = '我是全局'
function banners() {
var banner = '我是局部'
//banner='我是局部变量' // 去掉var 变成全局变量 (更改了banner值)
console.log(banner) //我是局部
}
banners()
console.log(banner) //我是全局(去掉var="我是局部")
var sex = '男'
function setName() {
var names = "JOin"
function sexs() {
console.log(`${
names}的性别是${
sex}`)
}
return sexs()
}
setName()
// console.log(names) // 报错 names undefault 外部无法访问局部方法以及属性
// sexs() // 报错 funccion undefault
Six, global functions
Understand memory management and master the use of global functions
// 垃圾回收机制 ：周期性的清理不在使用内存 (内存（声明的变量、对象、函数需要占据内存）)===>尽量减少不必要全局变量的声明 、不使用的变量赋值为null
//全局函数和属性可以用在所有内建的javeScript对象,全局函数又叫顶层函数或者系统函数
let int='120.545'
console.log('-----------------分割线---------------------------')
console.log(parseInt(int)) //120 字符串取整数
console.log(parseFloat(int)) // 120.545 取小数点
console.log(isNaN(int))// false 检测参数是否有非数字
console.log((Number(int))) // 120.545
console.log((String(int))) // 120.545
//6、eval() 函数可以计算某一个字符串，并执行其中的代码
var str='function t(){return 2021} t()'
console.log(eval(str)) //2021
//7、escape和unescape对字符串 的编码解码
let escapetext='我读 yi s K p'
let results=escape(escapetext)
console.log(results) // 字符串编码后：%u6211%u8BFB%20yi%20s%20K%20p
console.log(unescape(results)) // 解码：我读 yi s K p
//8、encodeURL()、decodeURI() 把字符串编码为URl(同上用法 )
//9、encodeURLcomponent、decodeURIcomponent 同上(懒得写 了)
// 10、isFinite() 检测某一个知否是无穷大的数