目录
一、对象
1.什么是对象?
多个数据的封装体
用来保存多个数据的容器
一个对象代表现实世界中的一个事物
2.为什么要用对象?
统一管理多个数据
3.对象的组成
属性:属性名(字符串)和属性值(任意类型)组成
方法:一种特别的属性(属性值是函数)
4.如何访问对象内部数据
.属性名 :编码简单,有时不能用
["属性名"]:编码麻烦,能通用。
let p = {
name:"Tom",
age:12,
setName:function(name){
this.name = name;
},
setAge:function(age){
this.age = age
}
}
p['setName']("Bob")
console.log(p.name); //Bob
p["setAge"](21)
console.log(p["age"]); //21
什么时候需要使用["属性名"]的方式?
1.当属性名包含特殊字符,比如:-、空格等时
//p.content-type = 'text/json'//不能用
p['content-type'] = "text/json"
2.在变量名不确定时
//p.propName = value //不能用
p['propName'] = value
二、函数
1.什么是函数?
实现特定功能的n条语句的封装体
只有函数是可以执行的,其他类型的数据不能执行
2.为什么要用函数?
提高代码复用
便于阅读交流
3.如何定义函数?
构造函数
函数声明
表达式
4.如何调用(执行)函数?
test():直接调用
obj.test():通过对象调用
new test():new 调用
test.call/apply(obj):临时让test成为obj的方法进行调用
let obj = {}
function fn(){
this.age = 12
}
fn.call(obj) //可以让一个函数成为指定任意对象的方法进行调用
console.log(obj.age); //12
三、回调函数
1.什么函数才是回调函数?
1.自定义的
2.没有调用
3.最终它执行了
2.常见的回调函数?
- DOM事件回调函数(与用户交互)
- 定时器回调函数
- AJAX请求回调函数(与后台交互)
- 生命周期回调函数
<body>
<button id="btn">测试点击事件</button>
</body>
<script>
document.getElementById("btn").onclick = function(){//DOM事件回调函数
alert(this.innerHTML)
}
//定时器
setTimeout(function(){//定时器回调函数
alert("到点了")
},2000)
</script>
四、IIFE
1.理解
全称:Immediately-Invoked Function Expression即调函数表达式
2.作用
隐藏实现
不会污染外部(全局)命名空间
用它来编写JS模块
(function(){ //匿名函数自调用
console.log("......");
})()
;(function(){
let a = 1;
function test(){
console.log(++a);
}
window.$ = function(){ //向外暴露一个全局函数
return {
test:test
}
}
})()
$().test() //1.$是一个函数 2.$执行后返回的是一个对象
五、函数中的this
1.this是什么?
任何函数本质上都是通过某个对象来调用,如果没有直接指定就是window
所有函数内部都有一个变量this
它的值是调用函数的当前对象
2.如何确定this的值?
test(): window
p.test(): p
new test(): 新创建的对象
p.call(obj): obj
function Person(color){
console.log(this);
this.color = color;
this.getColor = function(){
console.log(this);
return this.color
}
this.setColor = function(color){
console.log(this);
this.color = color
}
}
Person("red") //this是window
let p = new Person("yellow") //this是p
p.getColor(); //this是p
let obj = {}
p.setColor.call(obj,"black") //this是obj
let test = p.getColor;
test() //this是window
function fn1(){
function fn2(){
console.log(this);
}
fn2() //this是window
}
关于分号的问题:
1.JS一条语句的后面可以不加分号
2.是否加分号是编码风格问题,没有应不应该,只有自己喜不喜欢
3.在下面两种情况下不加分号会有问题:
*小括号开头的前一条语句
*中方括号开头的前一条语句
4.解决办法:在行首加分号
5.强有力的例子:vue.js库