2019年9月1日星期日今日学习内容

localStorage的用法
box-sizing: border-box;
函数表达式
事件循环

1.localStorage的用法
作用：用于本地存储，以键值对的形式存起来的。
首先我想问一下localStorage是一个什么东西？
其实localStorage是一个对象。

localStorage.setItem('name','wangxiao');

上面我们为localStorage设置了一个name的键值。
平时我们用localStorage.getItem(‘name’)得到设置的值。如果我们用

localStorage.name

会不会得到呢？
其实是可以得到的，原因是localStorage是一个对象。
2.box-sizing: border-box||border-content||inherit;

border-box width+padding+border（宽度+内边距+边框）
border-content width
inherit 继承父盒子的box-sizing
下面有个示例

.box{width: 200px;height: 200px;background: red;border: 20px solid #ccc;padding: 20px;box-sizing: border-box;
}

请问红色盒子的实际宽度和高度是多少？（答案可以执行下面的例子就可以看到）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>box-sizing</title>
<style>.box{width: 200px;height: 200px;background: red;border: 20px solid #ccc;padding: 20px;box-sizing: border-box;}
</style>
</head>
<body><div id='root' class='box'></div><script>//box-sizing: border-box || content-box;//border-box width+padding+border//border-content width</script>
</body>
</html>

实际的宽度和高度分别为：160px;
刚才上面提到box-sizing:inherit;继承父盒子的box-sizing，下面有个例子可以看看：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>box-sizing</title>
<style>.box{width: 200px;height: 200px;background: red;border: 20px solid #ccc;padding: 20px;box-sizing: border-box;}.child{width: 100px;height: 100px;background: blue;padding: 10px;border: 10px solid #ccc;box-sizing: inherit;}
</style>
</head>
<body><div id='root' class='box'><div class='child'></div></div><script>//box-sizing: border-box || content-box;//border-box width+padding+border//border-content width</script>
</body>
</html>

这里又让我想到了标准盒模型和怪异盒模型。

标准盒模型 width=content+padding+border+margin
怪异盒模型 width=width+margin （width包括：content+padding+border）

3.函数表达式
定义函数的方式有两种：

函数声明
函数表达式

函数声明的语法是这样的：

function functionName(arg0,arg1,arg2){//函数体
}

关于函数声明的一个最重要的特征就是函数声明提升，意思是在执行代码之前会先读取函数声明。这就意味着可以把函数声明放在函数调用的后面。

test();
function test(){}

第二种创建函数的方式是使用函数表达式。函数表达式有几种不同的语法形式。下面是最常见的一种形式。

var functionName = function(arg0,arg1,arg2){//函数体
}

函数声明和函数表达式最重要的区别就是：前者可以函数声明提升，后者不会。
理解函数提升的关键，就是理解函数声明与函数表达式之间的区别。
下面有一个题目考的就是函数声明和函数表达式的区别。

console.log(foo());
function foo(){return bar();var bar = function(){ return 5}var bar = ()=>6;var bar = (function(){return 7})()function bar(){return 8}
}

返回的结果是8，函数声明提升，因此会返回相应的结果。如果是下面的例子呢？会有什么不同

console.log(foo());
function foo(){return bar();function bar(){return 8}var bar = function(){ return 5}var bar = ()=>6;var bar = (function(){return 7})()
}

结果是一样的。
再变一下，看有没有什么不同之处。

console.log(foo());
function foo(){function bar(){return 8}var bar = function(){ return 5}var bar = ()=>6;var bar = (function(){return 7})()return bar();
}

返回的结果是：

VM646:7 Uncaught TypeError: bar is not a function

因为var bar = (function(){return 7})()已经执行完了相当于

var bar = 7;

因此才会有 bar is not a function

2019年9月1日星期日今日学习内容相关推荐

2019年7月4日星期四今日计划
2019年7月4日星期四今日计划学习自定义事件总结自定义事件预期进度80%
2019年7月20日星期六今日计划
2019年7月20日星期六今日计划 Recursive paths Slidebar Animated Transitions Ambiguous Matches
20210823 |sql语句生成一张从2019年1月1日至今日的日期表
-- 请用sql语句生成一张从2019年1月1日至今日的日期表# 建表drop table if exists dim_date_df; create table dim_date_df( date ...
2019年7月1日星期一今日计划
2019年7月1日星期一今日计划回顾重复定时器学习Yielding Processes
2019年6月19日星期三今日计划
2019年6月19日星期三今日计划学习XMLHttpRequest对象
#单机只打开一次窗口_[2019年11月27日]CCWOW单机版修复内容
各位CCWOWER,单机版发布2个月以来,一直没有进行过功能性的更新,最近花了3天的空闲时间为单机版做的一些功能,同时发布32位单机版本,下面是更新日志: 2019-11-27系统为没有单位属性的物 ...
ccwow星期三服务器维护,【网络游戏】[2019年11月27日]CCWOW单机版修复内容_玩得好游戏攻略...
各位CCWOWER,单机版发布2个月以来,一直没有进行过功能性的更新,最近花了3天的空闲时间为单机版做的一些功能,同时发布32位单机版本,下面是更新日志: 2019-11-27系统为没有单位属性的物品 ...
32python腾讯位置大数据2.0版本成功输出北京位置数据（续接上2019年8月21日停止服务的内容）
import requests import json#通传入日期和身份号编码获取数据 def get_data():url = "https://heat.qq.com/api/getLb ...
绝地求生6月22号服务器维护中,绝地求生2019年5月22日维护到几点？吃鸡5月22日更新内容...
本文导航第1页: 绝地求生5月22日更新第8页: 改善降落时界面第2页: 绝地求生PC1.0第29轮更新内容第9页: 改善信号枪显示界面第3页: 生存通行证3:百搭牌第10页: 自定义比赛 ...

2019年9月1日星期日今日学习内容

2019年9月1日星期日今日学习内容相关推荐

最新文章

热门文章

2019年9月1日 星期日 今日学习内容

2019年9月1日 星期日 今日学习内容相关推荐

最新文章

热门文章

2019年9月1日星期日今日学习内容

2019年9月1日星期日今日学习内容相关推荐