var a = { age: 12 }
var b = a
a = { name: "Bob", age: 13 }
console.log(b.age, a.name, a.age)//12 "Bob" 13
b.age = 20
console.log(b.age, a.name, a.age)//20 "Bob" 13
变量赋值到底做的是什么事情?
将a的内容赋值给b(或者说拷贝一份给b)
函数传递参数 是值传递还是引用传递?
function fn(obj){
console.log(obj.name)
}
var obj = {name:'lulu'}
fn(obj)//lulu
内存空间 变量的释放(局部、全局)
局部变量 (ps:不代表带上他后面的{}) 自动释放:函数执行完释放(立马干掉)
自动释放 不是 垃圾回收器(以后的某一时刻 有间隔)
对象
<script>
var p = {
name :'lala',
age:20,
banji:{
name:'sadage',
class:'3班'
},
setName:function (name){
this.name = name
},
setAge:function (age){
this.age = age
}
}
// 访问内部数据有两种方法:
p.setName('Bob')
console.log(p.setName('Bob'))//undefined 都没返回值
p['setName']('lulu')
console.log(p.name , p['age'])//lulu 20
</script>
对象--什么时候使用['属性名']的 形式?
// 1.属性名中包含了特殊字符
var p = {}
p['content-type'] = 'sdjash',
p['woshi kong'] = 'hey kong'
console.log(p['content-type'])//sdjash
console.log( p['woshi kong'])//hey kong
//2.属性名不确定 p.propName 还是 p.myname 项目中会用到
var propName = 'myname'
var value = 300
// p.propName = value
// console.log(p.propName)//300 能打印出
p[propName] = value
console.log(p[propName])
函数:
- 什么是函数?
- 为什么要用函数?
- 如何定义函数?
- 如何调用(执行)函数?
function fn(name){
this.name = name
}
var fun = function(age){
this.age= age
}
fn('xiaomi')
fun('20')
obj = {}
function objMethods(){
this.name = 'sdskadhasj' //给obj添加了属性
console.log('~~~~函数被调用~~')
}
// obj.objMethods() 不存在的
objMethods.call(obj)//~~~~函数被调用~~ //相当于obj.objMethods()
objMethods.apply(obj)//~~~~函数被调用~~
console.log(obj.name)//sdskadhasj
可以让一个函数成为指定任意对象的方法进行调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">测试这个按钮</button>
<script>
function fn(name) {
this.name = name
}
var fun = function (age) {
this.age = age
}
fn('xiaomi')
fun('20')
obj = {}
function objMethods() {
this.name = 'sdskadhasj' //给obj添加了属性
console.log('~~~~函数被调用~~')
}
// obj.objMethods() 不存在的
objMethods.call(obj)//~~~~函数被调用~~ //相当于obj.objMethods()
objMethods.apply(obj)//~~~~函数被调用~~
console.log(obj.name)//sdskadhasj
document.getElementById('btn').onclick = function () {
alert(this.innerHTML)
}
//超时定时器 setTimeout
//循环定时器 setInterval
setTimeout(() => {
//两秒后执行
alert('两秒后执行')
}, 2000)
// 定时器赋值
var timer = null //null 代表将要赋值 /把内存腾出来被垃圾回收器回收(在浏览器中)
timer = setTimeout(() => {
console.log('打印了定时器')
}, 5000)
if (timer !== null) {
console.log('timer:', timer)//输出不是打印了定时器 是timer: 2 (谷歌浏览器中是2 / 火狐timer: 3) wthy等于2呢? 这是BOM中的兼容性问题
} else {
console.log('timer为空null')
}
console.log(typeof timer);//=>'number'
// 定时器会返回一个数字值id,可以由clearInterval(id)或clearTimeout(id)来实现对对应定时器的清除。
var i = 0;
var timer2 = setInterval(function () {
console.log(i + 'i');
i++;
if (i >= 10) {
clearInterval(timer2)//清除定时器
}
}, 1000)
console.log('timer2:', timer2);// timer2 = 3 不确定的
</script>
</body>
</html>
定时器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>cnblog头部轮播图</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<style>
</style>
</head>
<body>
<input type='button' value='点击开启定时器' id='btn' />
<input type='button' value='点击关闭定时器' id='btn-close' />
<p id='content'></p>
<script>
var i = 0;
var oBtn = document.getElementById('btn');
var oBtnC = document.getElementById('btn-close');
var oP = document.getElementById('content');
var timer = null;
oBtn.onclick = function () {
if(timer){
clearInterval(timer);
}
timer=setInterval(function () {
oP.innerHTML += i + '<br/>';
i++;
}, 1000);
}
oBtnC.onclick = function (){
clearInterval(timer);//定时器执行就有值了
console.log(timer)
}
</script>
</body>
</html>
回调函数
立即执行函数 IIFE
作用: 隐藏实现 不会污染外部(全局)的命名空间 总而言之:立即执行函数会形成一个单独的作用域,我们可以封装一些临时变量或者局部变量,避免污染全局变量
var a = 2000;
console.log(a);//2000
//在不同的作用域
// () 包裹函数 让他形成一个整体 fn()
( function(){
var a = 20;
console.log(a);//20
})()
NaN 与 isNaN
var str = 'abc'
console.log(Number(str))//NaN
console.log(isNaN(str))//true 不是数字返回true