js基础 - 对象、函数、回调函数

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
// $ 是一个函数， $执行后返回的是一个对象