整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
層疊樣式表(英文全稱：Cascading Style Sheets) *層疊：多個樣式可以作用在同一個html的元素上，同時生效
是一種用來表現(xiàn)HTML或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。
CSS很像化妝，通過不同的CSS將同樣的HTML內(nèi)容打造為不同的呈現(xiàn)結(jié)果。
所以，前端程序員相互表白的時候可以說：you are the CSS to my HTML.
這是不是CSS是對HTML進行美化和布局作用的最好總結(jié)？
根據(jù)定義CSS的位置不同，分為行內(nèi)樣式、內(nèi)部樣式和外部樣式
也稱為內(nèi)聯(lián)樣式
直接在標簽中編寫樣式，通過使用標簽內(nèi)部的style屬性；
一般在測試的時候使用居多：
語法：
<html標簽 style="樣式1：值1;樣式2：值2;....樣式N：值N;">hello my css</html標簽>
案例：
<div style="color: red;">hello my css</div>弊端：只能對當前的標簽生效，沒有做到內(nèi)容和樣式相分離，耦合度太高。
定義在head標簽內(nèi)，通過style標簽，該標簽內(nèi)容就是CSS代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>內(nèi)部樣式</title>
<style>
div{
color: red;
}
</style>
</head>
<body>
<div>hello my css</div>
</body>
</html>1、提前定義css資源文件
2、在head標簽內(nèi)，定義link標簽引入外部樣式文件。
lina.css文件，放在與html頁面同級的css文件夾中：
div {
color: red;
}
html頁面中的引入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部樣式</title>
<link rel="stylesheet" href="css/lina.css" />
</head>
<body>
<div>hello my css</div>
</body>
</html>作用域的范圍:外部樣式表>內(nèi)部樣式表>行內(nèi)樣式表
優(yōu)先級：外部樣式表<內(nèi)部樣式表<行內(nèi)樣式表;
同樣的樣式作用在同一個標簽身上：就近原則；不同樣式作用在同一個標簽身上:疊加生效。
基本格式：由兩個主要的部分構(gòu)成：選擇器，以及一條或多條聲明:
選擇器 {
屬性1:值1;
屬性2:值2;
...
}
選擇器:篩選具有相似特征的元素
屬性和屬性值之間用冒號分割，不同的屬性之間用分號隔開。例如：
注釋是用來解釋你的代碼，并且可以隨意編輯它，瀏覽器會忽略它。
CSS注釋以 /* 開始, 以 */ 結(jié)束
/*這是CSS的注釋*/
div {
color: red; /*文字顏色是紅色*/
}選擇具有相同id屬性值的元素，建議html頁面中的id值唯一
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。
HTML元素以id屬性來設置id選擇器,CSS 中 id 選擇器以 "#" 來定義。
PS： ID屬性不要以數(shù)字開頭，數(shù)字開頭的ID在 Mozilla/Firefox 瀏覽器中不起作用。
雖然多個元素可以使用同一個id選擇器控制樣式，但是不推薦。如果需要同樣的樣式對多個標簽生效，使用class選擇器。
選擇具有相同的class屬性值的元素。
class 選擇器用于描述一組元素的樣式，class 選擇器有別于id選擇器，class可以在多個元素中使用。
class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示：
PS：類名的第一個字符不能使用數(shù)字！它無法在 Mozilla 或 Firefox 中起作用。
選擇具有相同標簽名稱的元素。
定義選擇器語法：標簽名稱{}；PS：標簽名稱必須是html提供好的標簽。
使用標簽選擇器：自動使用在所有的同名的標簽上
ID選擇器 > 類選擇器 > 標簽選擇器
當多個選擇器作用在同一個標簽上的時候，如果屬性沖突，看優(yōu)先級；如果不沖突，樣式疊加生效。
行內(nèi)樣式 > 內(nèi)部樣式 >外部樣式
同樣，三個樣式表中都有內(nèi)容作用在同一個html標簽的時候，如果屬性沖突，看優(yōu)先級；如果不沖突，樣式疊加生效。
跟顏色相關的取值分3種：
1、顏色的單詞 red blue...
2、rgb(紅，綠，藍)三色的取值范圍是0-255 rgb(255,0,0)
rgba（紅，綠，藍,透明度），透明度取值：0-1 0 全透明 1-不透明 0.5 半透明rgba(255,0,0,0.4)
3、#值1值2值3 ：值的范式是00-FF 十六進制數(shù)字組成的 例如：#FF0000
PS：只有塊狀元素可以設置寬高，行級元素設置不生效。
取值方式有2種：
1：數(shù)值 絕對數(shù)字 單位是像素PX
2：百分比：占據(jù)父元素的比例
以谷歌瀏覽器為例說明。
快捷鍵F12或者工具條中的開發(fā)者工具調(diào)出以下內(nèi)容。
在elements中可以看到當前頁面的所有標簽，在styles中可以看到html元素對應的樣式。
所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和布局時使用。
CSS盒模型本質(zhì)上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內(nèi)容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
盒子模型說明圖：
元素的實際寬度和高度：
當我們計算一個元素實際在頁面占有的總寬度計算公式是這樣的：
總元素寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。
Float（浮動），往往是用于圖像，但它在布局時一樣非常有用。
元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。
一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
浮動元素之后的元素將圍繞它。
浮動元素之前的元素將不會受到影響。
如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。
元素浮動之后，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性。
clear 屬性指定元素兩側(cè)不能出現(xiàn)浮動元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮動</title>
<style>
div{
width: 400px;
height: 200px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<!--沒有浮動屬性的元素都屬于常規(guī)文檔流：從上往下從左往右依次顯示
浮動的元素都脫離了常規(guī)文檔流；
為了好理解：大家可以認為浮動元素屬于一層，非浮動元素屬于一層
如果想要非浮動元素不受浮動元素的影響，需要使用clear屬性
-->
<div style="background: rgba(255,0,0,0.5); float: left;">
div1-左浮動，脫離常規(guī)文檔流，緊貼父元素或者上一個同方向浮動
</div>
<div style="background: lawngreen; width: 600px; height: 350px; ">
div2-未浮動，常規(guī)文檔流,
<br/>PS:此時div1在div2的上方顯示，因為div1和div2是不同文檔流中的元素，顯示互不影響
如果不想讓div2被浮動元素影響，需要添加clear屬性。
添加clear: left;之后div2就會忽略div1浮動的影響，在div1層后面顯示，不會重疊了，大家可以自己試驗一下
</div>
<div style="background: lightblue; float: right; width: 1800px;">
div3-右浮動，脫離常規(guī)文檔流，緊貼父元素或者上一個同方向浮動
</div>
<div style="background: lightcoral; width: 600px; height: 350px; ">
div4-未浮動，常規(guī)文檔流,
<br/>PS:此時div3在div4的上方顯示，因為div3和div4是不同文檔流中的元素，顯示互不影響
如果不想讓div4被浮動元素影響，需要添加clear屬性。
添加clear: right;之后div4就會忽略div3浮動的影響，在div3層后面顯示，不會重疊了，大家可以自己試驗一下
clear屬性有三個取值：left、right、both;分別是取出左浮動、有浮動和所有浮動元素的影響
</div>
<div style="background: lavender;">
div5-未浮動，常規(guī)文檔流,
</div>
</body>
</html>
控制內(nèi)容溢出元素框時顯示的方式。
overflow屬性有以下值：
值 | 描述 |
visible | 默認值。內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外。 |
hidden | 內(nèi)容會被修剪，并且其余內(nèi)容是不可見的。 |
scroll | 內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容。 |
auto | 如果內(nèi)容被修剪，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容。 |
inherit | 規(guī)定應該從父元素繼承 overflow 屬性的值。 |
注意:overflow 屬性只工作于指定高度的塊元素上。
注意: 在 OS X Lion ( Mac 系統(tǒng)) 系統(tǒng)上，滾動條默認是隱藏的，使用的時候才會顯示 (設置 "overflow:scroll" 也是一樣的)。
display屬性設置一個元素應如何顯示，visibility屬性指定一個元素應可見還是隱藏。
隱藏一個元素可以通過把display屬性設置為"none"，或把visibility屬性設置為"hidden"。但是請注意，這兩種方法會產(chǎn)生不同的結(jié)果。
visibility:hidden可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響布局。
display:none可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。
CSS樣式有以下三個：
由兩個或多個基礎選擇器，通過不同方式組合而成的。
可以更準確更精細的選擇目標元素標簽。
語法：* {} 一般去掉標簽的一些默認效果的時候使用，或者整站通用效果時使用。但是不推薦，一般將 * 替換為常用標簽的名稱，并用逗號分隔，其實就是使用并集選擇器。
并集選擇器（CSS選擇器分組）是各個選擇器通過,連接而成的，通常用于集體聲明。
語法：選擇器1，選擇器2，......選擇器N{}
意思是多個選擇器都是通用的樣式。任何形式的選擇器（包括標簽選擇器、class類選擇器id選擇器等），都可以作為并集選擇器的一部分。
條件：交集選擇器由兩個選擇器構(gòu)成，找到的標簽必須滿足：既有標簽一的特點，也有標簽二的特點。
語法：h3.class{ color:red; }
其中第一個為標簽選擇器，第二個為class選擇器，兩個選擇器之間不能有空格，例如div.list。
交集選擇器是并且的意思。 即...又...的意思
例如： table.bg 選擇的是： 類名為 .bg 的 表格標簽，但用的相對來說比較少。概念：后代選擇器又稱為包含選擇器。
作用：用來選擇元素或元素組的子孫后代。
其寫法就是把外層標簽寫在前面，內(nèi)層標簽寫在后面，中間用空格分隔，先寫父親爺爺，在寫兒子孫子。
格式：父級 子級{屬性:屬性值;屬性:屬性值;}語法：.class h3{color:red;font-size:16px;}
當標簽發(fā)生嵌套時，內(nèi)層標簽就成為外層標簽的后代。
子孫后代都可以這么選擇。 或者說，它能選擇任何包含在內(nèi) 的標簽。
作用：子元素選擇器只能選擇作為某元素子元素(親兒子)的元素。
其寫法就是把父級標簽寫在前面，子級標簽寫在后面，中間跟一個 > 進行連接。
語法：.class>h3{color:red;font-size:14px;}
比如： .demo > h3 {color: red;} 說明 h3 一定是demo 親兒子。 demo 元素包含著h3。<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>復合選擇器</title>
<style>
/*全局選擇器：
一般去掉標簽的一些默認效果的時候使用，或者整站通用效果時使用。但是不推薦，
*/
*{
color: #333;/*定義全局文字顏色，統(tǒng)一色彩基調(diào)*/
}
/*并集選擇器：通常用于集體聲明
替換全局選擇器；
*/
div,p,dldt,dd{
/*去掉瀏覽器的默認樣式*/
margin: 0;
padding: 0;
color: #333;/*定義全局文字顏色，統(tǒng)一色彩基調(diào)*/
}
/*交集選擇器*/
li.myli{
color: red;
}
/*后代選擇器*/
ul li{
font-size: 28px;
}
.myUL li{
font-family: "微軟雅黑";
}
.myUL li a{
text-decoration: line-through;
}
/*子元素選擇器*/
.demo>h3{
color: red;
}
</style>
</head>
<body>
<ul>
<li>li11111111111</li>
<li class="myli">li22222222222</li>
<li>li33333333333</li>
<li>li44444444444<a href="">點擊我試試</a></li>
<li class="myUL">
<ul>
<li>li11111111111</li>
<li class="myli">li22222222222</li>
<li>li33333333333</li>
<li>li44444444444
<a href="">點擊我試試</a>
</li>
</ul>
</li>
</ul>
<ol>
<li>li11111111111</li>
<li>li22222222222</li>
<li>li33333333333</li>
<li>li44444444444</li>
</ol>
<div class="demo">
div1
<h3>靜夜思</h3>
<ul>
<li><h3>靜夜思----li</h3></li>
</ul>
</div>
</body>
</html>
偽類選擇器：和類選擇器相區(qū)別類選擇器是一個點 比如 .demo {} 而我們的偽類 用 2個點 就是 冒號 比如 :link{} 。
作用：用于向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果， 比如可以選擇 第1個，第n個元素。
因為偽類選擇器很多，比如鏈接偽類，結(jié)構(gòu)偽類等等。我們這里先給大家講解鏈接偽類選擇器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>偽類選擇器</title>
<style>
/*偽類選擇器*/
a:link{
color: red;/*默認顏色是紅色*/
}
a:visited{
color: blue;/*訪問過的頁面是藍色*/
}
a:hover{
color: green;/*鼠標懸浮是綠色*/
font-size: 28px;
}
a:active{
color: gold;/*按下鼠標不放手是金色*/
font-family: "微軟雅黑";
}
</style>
</head>
<body>
<a href="03-常用樣式.html" target="_blank">常用樣式</a>
<a href="04-盒子模型1.html" target="_blank">盒子模型</a>
<a href="05-綜合練習.html" target="_blank">綜合練習</a>
</body>
</html>
注意**
a { /* a是標簽選擇器 所有的鏈接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* :hover 是鏈接偽類選擇器 鼠標經(jīng)過 */
color: red; /* 鼠標經(jīng)過的時候，由原來的 灰色 變成了紅色 */
}選擇器 | 作用 | 特征 | 使用情況 | 隔開符號及用法 |
后代選擇器 | 用來選擇元素后代 | 是選擇所有的子孫后代 | 較多 | 符號是空格 p .one |
子代選擇器 | 選擇 最近一級元素 | 只選親兒子 | 較少 | 符號是> .nav>p |
交集選擇器 | 選擇兩個標簽交集的部分 | 既是 又是 | 較少 | 沒有符號 p.one |
并集選擇器 | 選擇某些相同樣式的選擇器 | 可以用于集體聲明 | 較多 | 符號是逗號 .nav, .header |
鏈接偽類選擇器 | 給鏈接更改狀態(tài) | 較多 | 重點記住 a{} 和 a:hover 實際開發(fā)的寫法 |
his是JavaScript中的一個關鍵字，但是又一個相對比較特別的關鍵字，不像function、var、for、if這些關鍵字一樣，可以很清楚的搞清楚它到底是如何使用的。
this會在執(zhí)行上下文中綁定一個對象，但是是根據(jù)什么條件綁定的呢？在不同的執(zhí)行條件下會綁定不同的對象，這也是讓人捉摸不定的地方。
這一次，我們一起來徹底搞定this到底是如何綁定的吧！
在常見的編程語言中，幾乎都有this這個關鍵字（Objective-C中使用的是self），但是JavaScript中的this和常見的面向?qū)ο笳Z言中的this不太一樣：
使用this有什么意義呢？下面的代碼中，我們通過對象字面量創(chuàng)建出來一個對象，當我們調(diào)用對象的方法時，希望將對象的名稱一起進行打印。
如果沒有this，那么我們的代碼會是下面的寫法：
var obj = {
name: "why",
running: function() {
console.log(obj.name + " running");
},
eating: function() {
console.log(obj.name + " eating");
},
studying: function() {
console.log(obj.name + " studying");
}
}
事實上，上面的代碼，在實際開發(fā)中，我們都會使用this來進行優(yōu)化：
var obj = {
name: "why",
running: function() {
console.log(this.name + " running");
},
eating: function() {
console.log(this.name + " eating");
},
studying: function() {
console.log(this.name + " studying");
}
}
所以我們會發(fā)現(xiàn)，在某些函數(shù)或者方法的編寫中，this可以讓我們更加便捷的方式來引用對象，在進行一些API設計時，代碼更加的簡潔和易于復用。
當然，上面只是應用this的一個場景而已，開發(fā)中使用到this的場景到處都是，這也是為什么它不容易理解的原因。
我們先說一個最簡單的，this在全局作用域下指向什么？
console.log(this); // window
var name = "why";
console.log(this.name); // why
console.log(window.name); // why
但是，開發(fā)中很少直接在全局作用域下去使用this，通常都是在函數(shù)中使用。
所有的函數(shù)在被調(diào)用時，都會創(chuàng)建一個執(zhí)行上下文：
我們先來看一個讓人困惑的問題：
// 定義一個函數(shù)
function foo() {
console.log(this);
}
// 1.調(diào)用方式一: 直接調(diào)用
foo(); // window
// 2.調(diào)用方式二: 將foo放到一個對象中,再調(diào)用
var obj = {
name: "why",
foo: foo
}
obj.foo() // obj對象
// 3.調(diào)用方式三: 通過call/apply調(diào)用
foo.call("abc"); // String {"abc"}對象
上面的案例可以給我們什么樣的啟示呢？
那么this到底是怎么樣的綁定規(guī)則呢？一起來學習一下吧
我們現(xiàn)在已經(jīng)知道this無非就是在函數(shù)調(diào)用時被綁定的一個對象，我們就需要知道它在不同的場景下的綁定規(guī)則即可。
什么情況下使用默認綁定呢？獨立函數(shù)調(diào)用。
案例一：普通函數(shù)調(diào)用
function foo() {
console.log(this); // window
}
foo();
案例二：函數(shù)調(diào)用鏈（一個函數(shù)調(diào)用另外一個函數(shù)）
// 2.案例二:
function test1() {
console.log(this); // window
test2();
}
function test2() {
console.log(this); // window
test3()
}
function test3() {
console.log(this); // window
}
test1();
案例三：將函數(shù)作為參數(shù)，傳入到另一個函數(shù)中
function foo(func) {
func()
}
function bar() {
console.log(this); // window
}
foo(bar);
我們對案例進行一些修改，考慮一下打印結(jié)果是否會發(fā)生變化：
function foo(func) {
func()
}
var obj = {
name: "why",
bar: function() {
console.log(this); // window
}
}
foo(obj.bar);
另外一種比較常見的調(diào)用方式是通過某個對象進行調(diào)用的：
案例一：通過對象調(diào)用函數(shù)
function foo() {
console.log(this); // obj對象
}
var obj = {
name: "why",
foo: foo
}
obj.foo();
案例二：案例一的變化
function foo() {
console.log(this); // obj對象
}
var obj1 = {
name: "obj1",
foo: foo
}
var obj2 = {
name: "obj2",
obj1: obj1
}
obj2.obj1.foo();
案例三：隱式丟失
function foo() {
console.log(this);
}
var obj1 = {
name: "obj1",
foo: foo
}
// 講obj1的foo賦值給bar
var bar = obj1.foo;
bar();
隱式綁定有一個前提條件：
如果我們不希望在 對象內(nèi)部 包含這個函數(shù)的引用，同時又希望在這個對象上進行強制調(diào)用，該怎么做呢？
因為上面的過程，我們明確地綁定了this指向的對象，所以稱之為 顯示綁定。
通過call或者apply綁定this對象
function foo() {
console.log(this);
}
foo.call(window); // window
foo.call({name: "why"}); // {name: "why"}
foo.call(123); // Number對象,存放時123
如果我們希望一個函數(shù)總是顯示的綁定到一個對象上，可以怎么做呢？
方案一：自己手寫一個輔助函數(shù)（了解）
function foo() {
console.log(this);
}
var obj = {
name: "why"
}
function bind(func, obj) {
return function() {
return func.apply(obj, arguments);
}
}
var bar = bind(foo, obj);
bar(); // obj對象
bar(); // obj對象
bar(); // obj對象
方案二：使用Function.prototype.bind
function foo() {
console.log(this);
}
var obj = {
name: "why"
}
var bar = foo.bind(obj);
bar(); // obj對象
bar(); // obj對象
bar(); // obj對象
有些時候，我們會調(diào)用一些JavaScript的內(nèi)置函數(shù)，或者一些第三方庫中的內(nèi)置函數(shù)。
案例一：setTimeout
setTimeout(function() {
console.log(this); // window
}, 1000);
為什么這里是window呢？
案例二：數(shù)組的forEach
數(shù)組有一個高階函數(shù)forEach，用于函數(shù)的遍歷：
var names = ["abc", "cba", "nba"];
names.forEach(function(item) {
console.log(this); // 三次window
});
我們是否可以改變該函數(shù)的this指向呢？
forEach參數(shù)
var names = ["abc", "cba", "nba"];
var obj = {name: "why"};
names.forEach(function(item) {
console.log(this); // 三次obj對象
}, obj);
案例三：div的點擊
如果我們有一個div元素：
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<div class="box"></div>
獲取元素節(jié)點，并且監(jiān)聽點擊：
var box = document.querySelector(".box");
box.onclick = function() {
console.log(this); // box對象
}
所以傳入到內(nèi)置函數(shù)的回調(diào)函數(shù)this如何確定呢？
JavaScript中的函數(shù)可以當做一個類的構(gòu)造函數(shù)來使用，也就是使用new關鍵字。
使用new關鍵字來調(diào)用函數(shù)時，會執(zhí)行如下的操作：
// 創(chuàng)建Person
function Person(name) {
console.log(this); // Person {}
this.name = name; // Person {name: "why"}
}
var p = new Person("why");
console.log(p);
學習了四條規(guī)則，接下來開發(fā)中我們只需要去查找函數(shù)的調(diào)用應用了哪條規(guī)則即可，但是如果一個函數(shù)調(diào)用位置應用了多條規(guī)則，優(yōu)先級誰更高呢？
1.默認規(guī)則的優(yōu)先級最低
毫無疑問，默認規(guī)則的優(yōu)先級是最低的，因為存在其他規(guī)則時，就會通過其他規(guī)則的方式來綁定this
2.顯示綁定優(yōu)先級高于隱式綁定
顯示綁定和隱式綁定哪一個優(yōu)先級更高呢？這個我們可以測試一下：
function foo() {
console.log(this);
}
var obj1 = {
name: "obj1",
foo: foo
}
var obj2 = {
name: "obj2",
foo: foo
}
// 隱式綁定
obj1.foo(); // obj1
obj2.foo(); // obj2
// 隱式綁定和顯示綁定同時存在
obj1.foo.call(obj2); // obj2, 說明顯式綁定優(yōu)先級更高
3.new綁定優(yōu)先級高于隱式綁定
function foo() {
console.log(this);
}
var obj = {
name: "why",
foo: foo
}
new obj.foo(); // foo對象, 說明new綁定優(yōu)先級更高
4.new綁定優(yōu)先級高于bind
new綁定和call、apply是不允許同時使用的，所以不存在誰的優(yōu)先級更高
function foo() {
console.log(this);
}
var obj = {
name: "obj"
}
var foo = new foo.call(obj);
new和call同時使用
但是new綁定是否可以和bind后的函數(shù)同時使用呢？可以
function foo() {
console.log(this);
}
var obj = {
name: "obj"
}
// var foo = new foo.call(obj);
var bar = foo.bind(obj);
var foo = new bar(); // 打印foo, 說明使用的是new綁定
優(yōu)先級總結(jié)：
我們講到的規(guī)則已經(jīng)足以應付平時的開發(fā)，但是總有一些語法，超出了我們的規(guī)則之外。（神話故事和動漫中總是有類似這樣的人物）
如果在顯示綁定中，我們傳入一個null或者undefined，那么這個顯示綁定會被忽略，使用默認規(guī)則：
function foo() {
console.log(this);
}
var obj = {
name: "why"
}
foo.call(obj); // obj對象
foo.call(null); // window
foo.call(undefined); // window
var bar = foo.bind(null);
bar(); // window
另外一種情況，創(chuàng)建一個函數(shù)的 間接引用，這種情況使用默認綁定規(guī)則。
我們先來看下面的案例結(jié)果是什么？
var num1 = 100;
var num2 = 0;
var result = (num2 = num1);
console.log(result); // 100
我們來下面的函數(shù)賦值結(jié)果：
function foo() {
console.log(this);
}
var obj1 = {
name: "obj1",
foo: foo
};
var obj2 = {
name: "obj2"
}
obj1.foo(); // obj1對象
(obj2.foo = obj1.foo)(); // window
在ES6中新增一個非常好用的函數(shù)類型：箭頭函數(shù)
箭頭函數(shù)不使用this的四種標準規(guī)則（也就是不綁定this），而是根據(jù)外層作用域來決定this。
我們來看一個模擬網(wǎng)絡請求的案例：
var obj = {
data: [],
getData: function() {
var _this = this;
setTimeout(function() {
// 模擬獲取到的數(shù)據(jù)
var res = ["abc", "cba", "nba"];
_this.data.push(...res);
}, 1000);
}
}
obj.getData();
上面的代碼在ES6之前是我們最常用的方式，從ES6開始，我們會使用箭頭函數(shù)：
var obj = {
data: [],
getData: function() {
setTimeout(() => {
// 模擬獲取到的數(shù)據(jù)
var res = ["abc", "cba", "nba"];
this.data.push(...res);
}, 1000);
}
}
obj.getData();
思考：如果getData也是一個箭頭函數(shù)，那么setTimeout中的回調(diào)函數(shù)中的this指向誰呢？
var obj = {
data: [],
getData: () => {
setTimeout(() => {
console.log(this); // window
}, 1000);
}
}
obj.getData();
var name = "window";
var person = {
name: "person",
sayName: function () {
console.log(this.name);
}
};
function sayName() {
var sss = person.sayName;
sss();
person.sayName();
(person.sayName)();
(b = person.sayName)();
}
sayName();
這道面試題非常簡單，無非就是繞一下，希望把面試者繞暈：
function sayName() {
var sss = person.sayName;
// 獨立函數(shù)調(diào)用，沒有和任何對象關聯(lián)
sss(); // window
// 關聯(lián)
person.sayName(); // person
(person.sayName)(); // person
(b = person.sayName)(); // window
}
var name = 'window'
var person1 = {
name: 'person1',
foo1: function () {
console.log(this.name)
},
foo2: () => console.log(this.name),
foo3: function () {
return function () {
console.log(this.name)
}
},
foo4: function () {
return () => {
console.log(this.name)
}
}
}
var person2 = { name: 'person2' }
person1.foo1();
person1.foo1.call(person2);
person1.foo2();
person1.foo2.call(person2);
person1.foo3()();
person1.foo3.call(person2)();
person1.foo3().call(person2);
person1.foo4()();
person1.foo4.call(person2)();
person1.foo4().call(person2);
下面是代碼解析：
隨著現(xiàn)代網(wǎng)頁應用的復雜性日益增加，傳統(tǒng)的窗口管理工具已無法滿足開發(fā)者和用戶的需求。WinBox，一款前沿的 HTML5 網(wǎng)絡窗口管理器，以其輕量級、高性能和完全可定制的特性，正引領著界面管理的革新。
在追求速度和效率的時代，WinBox 以極簡的核心打造，體積輕巧卻功能強大。它通過優(yōu)化的代碼和算法，確保在各種設備和平臺上都能提供流暢的體驗。無論是桌面環(huán)境還是移動設備，WinBox 均能無縫集成，實現(xiàn)快速響應。
WinBox 設計之初就致力于獨立性，無需額外插件或庫的支持即可運行。這意味著更少的兼容性問題，以及更易于集成到任何現(xiàn)有的網(wǎng)頁項目中。開發(fā)團隊可以專注于功能的實現(xiàn)，而不必擔心底層的支撐問題。
定制化是 WinBox 的一大亮點。它提供了豐富的 API 和樣式選項，允許開發(fā)者根據(jù)自己的品牌和用戶體驗需求，調(diào)整窗口管理器的外觀和行為。從顏色主題到動畫效果，從布局結(jié)構(gòu)到交互邏輯，WinBox 讓每一個細節(jié)都盡在掌握。
作為一款開源工具，WinBox 擁有活躍的社區(qū)支持和不斷的功能迭代。開源意味著透明度和參與度，任何人都可以為項目貢獻代碼，報告 bug，或是提出新的想法。這樣的協(xié)作精神確保了 WinBox 能夠不斷進化，適應未來的挑戰(zhàn)。
無論是管理系統(tǒng)界面、開發(fā)復雜的單頁應用（SPA），還是創(chuàng)建交互式的數(shù)據(jù)可視化平臺，WinBox 都能夠提供堅實的基礎。它的靈活性和易用性使得從初創(chuàng)公司到大型企業(yè)，各種規(guī)模的開發(fā)團隊都可以從中受益。
<!DOCTYPE html>
<html>
<head>
<title>WinBox.js 示例</title>
<link rel="stylesheet" type="text/css" href="winbox.min.css">
<script src="winbox.min.js"></script>
</head>
<body>
<button onclick="openWindow()">打開窗口</button>
<script>
function openWindow() {
new WinBox({
title: '示例窗口',
width: 300,
height: 200,
content: '這是一個使用 WinBox.js 創(chuàng)建的窗口。'
});
}
</script>
</body>
</html>
在上面的代碼中，我們首先引入了 WinBox.js 的樣式表和腳本文件。然后，在頁面上添加了一個按鈕，點擊該按鈕將調(diào)用 openWindow 函數(shù)來創(chuàng)建一個新的窗口。
在 openWindow 函數(shù)中，我們使用 new WinBox() 構(gòu)造函數(shù)創(chuàng)建了一個新的窗口對象。通過傳遞一個配置對象作為參數(shù)，我們可以設置窗口的標題、寬度、高度和內(nèi)容等屬性。在這個例子中，我們設置了窗口的標題為 "示例窗口"，寬度為 300 像素，高度為 200 像素，并指定了窗口的內(nèi)容為一段文本。
當用戶點擊按鈕時，將會彈出一個新窗口，顯示指定的標題和內(nèi)容。你可以根據(jù)需要進一步自定義窗口的外觀和行為，例如添加按鈕、表單或其他交互元素。建議查看官網(wǎng)更過示例：
WinBox.js Modern HTML5 Window Manager
WinBox 是一個強大的HTML5窗口管理器。隨著 HTML5 技術的不斷成熟，WinBox 也將繼續(xù)發(fā)展，為開發(fā)者提供一個更加強大、靈活和高效的開發(fā)工具。現(xiàn)在就加入 WinBox 社區(qū)，共同塑造網(wǎng)絡界面管理的未來。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
