对象、函数、回调函数、IIFE等相关知识
1、对象
- 什么是对象?
多个数据的封装体;用来保存多个数据的容器;一个对象代表现实中一个事物 - 为什么要用对象?
可以统一管理多个数据 - 对象的组成
属性:属性名(字符串)和属性值(任意类型)组成
方法:一种特别的属性(属性值是函数) - 如何访问对象内部数据:
. 属性名:编码简单,有时不能用
[‘属性名’]:编码麻烦,但能通用。
var p = {
name:'tom',
age:14,
setname:function(name){
this.name = name
},
setage:function(age){
this.age= age
}
}
p.setname('Bob')
p['setage'](17)
console.log(p.name,p['age']) //Bob,17
- 什时候必须是使用 [‘属性名’] 的方式:
属性名包含特殊字符:-,空格,
变量名不确定。
// 属性名包含特殊字符:-,空格,
// p.content-type = ‘text/json’ 不能用
p['content-type'] = ‘text/json’
console.log(p['content-type'] ) //text/json
//变量名不确定
var propname = 'myage'
var value =18
// p.propname = value 会直接增加一个属性名为propname的属性,而不是增加或修改myage这个属性
p[propname] =value //[]内直接为变量名,不用引号,加了引号就意味着是属性名叫propname
2、函数
- 什么是函数?
实现特定功能的n条语句的封装体
只有函数是可以执行的,其他类型的数据不能执行 - 为什么要用函数?
提供代码复用;便于阅读交流 - 定义函数
函数声明
表达式
// 函数声明
function fn1(){
console.log("fn1()")
}
// 表达式
var fn2 = function (){
console.log("fn1()")
}
- 如何执行调用函数:
test():直接调用
obj.test():通过对象调用
new test():new调用
test.call/apply(obj):相当于 obj.test(),不同的是 test.call/apply(obj)的方式中 obj里本来没有test方法,临时让test成为obj的方法进行调用
var obj = {}
function test2(){
this.XXX = 'sssss'
}
// obj.test2() 不可用,obj中没有test2属性(方法)
test2.call(obj) //相当于 obj.test2(),可以让一个函数成为指定对象的方法进行调用
console.log(obj.xxx) //sssss
- 什时候必须是使用 [‘属性名’] 的方式:
属性名包含特殊字符:-,空格,
变量名不确定。
// 属性名包含特殊字符:-,空格,
// p.content-type = ‘text/json’ 不能用
p['content-type'] = ‘text/json’
console.log(p['content-type'] ) //text/json
//变量名不确定
var propname = 'myage'
var value =18
// p.propname = value 会直接增加一个属性名为propname的属性,而不是增加或修改myage这个属性
p[propname] =value //[]内直接为变量名,不用引号,加了引号就意味着是属性名叫propname
3、回调函数
- 什么函数才是回调函数?简易理解
你定义的、你没有调、但是最终它(在某个时刻、某些条件下)执行了 - 常见的回调函数
dom事件回调函数 ==》发生事件的dom元素
定时器回调函数
ajax请求回调函数
生命周期回调函数
// dom事件回调函数
document.getElementById('btn').onclick = function(){
alert(this.innerHTML)
}
// 定时器回调函数
setTimeout(function(){
alert('到点了')
},2000)
- 如何执行调用函数:
test():直接调用
obj.test():通过对象调用
new test():new调用
test.call/apply(obj):相当于 obj.test(),不同的是 test.call/apply(obj)的方式中 obj里本来没有test方法,临时让test成为obj的方法进行调用
var obj = {}
function test2(){
this.XXX = 'sssss'
}
// obj.test2() 不可用,obj中没有test2属性(方法)
test2.call(obj) //相当于 obj.test2(),可以让一个函数成为指定对象的方法进行调用
console.log(obj.xxx) //sssss
4、Immediately-Invoked Function Expression (IIFE)
IIFE(立即调用函数)实际上与匿名函数自调用是等同的,一个概念
作用:
- 隐藏内部实现
- 不会污染外部(全局)命名空间
- 用它来编写js模块
// 不写函数名、也不将函数赋值给变量,会报错
// 将function(){}看做一个整体,需要用()括起来,然后加()调用
(function(){
// 局部空间,外部看不到实现
var a=3
console.log(a+'......') // 3.......
})() //匿名函数自调用
var a = 4 //函数内部a与函数外部不会互相影响,即不会污染外部(全局)命名空间
console.log(a+'......') // 4......
;(function(){ //需要在自调用函数前面加 分号【;】,不加会把这个函数与前面的代码看成一个整体,然后报错
var a = 1
function test(){
console.log(++a)
}
window.$ = function(){ //向外暴露一个函数
return {
test : test
}
}
})() //匿名函数自调用
$().test() // 2
// $ 是一个函数, $执行后返回的是一个对象