- 形成一個(gè)閉包
函數(shù)里面返回一個(gè)函數(shù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>閉包</title>
<style>
li{
border: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<script>
// 為什么會(huì)有閉包，因?yàn)樽饔糜虻膯?wèn)題
// 自調(diào)用()(),
function a(){
return function b(){
// 一個(gè)函數(shù)里面放回一個(gè)函數(shù)這種情況稱為閉包
console.log('這是訪問(wèn)閉包里的返回函數(shù)');
}
}
// 訪問(wèn)閉包的方法
a()();
// 閉包的用途，保存私有的方法和私有的數(shù)據(jù)
// 優(yōu)點(diǎn):瀏覽器默認(rèn)會(huì)清理掉沒有使用的變量，可以通過(guò)閉包的方式內(nèi)部調(diào)用變量來(lái)實(shí)現(xiàn)儲(chǔ)存的變量和方法
// 缺點(diǎn):但是相應(yīng)的會(huì)造成瀏覽器內(nèi)存的占用，使得內(nèi)容運(yùn)行緩慢
function b(){
var b = 2;
return function c(){
var sum = b + 1;
console.log(sum);
}
}
b()();
// ()() 還有個(gè)用途就是生成一個(gè) 命名空間, 可以 類似于自調(diào)用，前面的括號(hào)放我們的閉包函數(shù)
// 后面的括號(hào)相當(dāng)于調(diào)用這個(gè)閉包函數(shù)里面也可以傳參數(shù)
// 事件隊(duì)列:在大量事件待執(zhí)行的時(shí)候會(huì)把事件列一個(gè)隊(duì)列等待調(diào)用
var dom = document.querySelectorAll('li');
for(let j=0;j<dom.length;j++){
dom[j].onclick=function(){
console.log(j+1)
}
}
// 需求:根據(jù)點(diǎn)擊打印出點(diǎn)擊的下標(biāo)
// let 是局部變量，而var 是全局變量，因此后者需要調(diào)用閉包來(lái)達(dá)到需求
for(var i =0;i<dom.length;i++){
dom[i].onclick=(
function(a){
return function(){
console.log(a+1)
}
}
)(i)
}
// 倘若不進(jìn)行閉包處理，var的變量會(huì)執(zhí)行完for循環(huán)，點(diǎn)擊時(shí)i全變成了6
// 添加事件的擴(kuò)展
// DOM 事件 最常用的
var lis = document.querySelectorAll('li')
for(let i=0;i<lis.length;i++){
// 參數(shù);事件類型 事件處理函數(shù)(回調(diào)) 監(jiān)聽器 冒泡或者捕獲(布爾值)
lis[i].addEventListener('click',function(){
console.log(i);
},false)
}
// 和onclick的區(qū)別,onclick會(huì)覆蓋，也就是說(shuō)只能同一個(gè)節(jié)點(diǎn)有一個(gè)
// 而addEventListener不會(huì)覆蓋
// 偽數(shù)組 arguments 不能直接使用數(shù)組方法
// 但是可以通過(guò)call 和 apply 上下文方法來(lái)使用
Array.prototype.join.call('arguments',['-']);
// 在arguments數(shù)組里的屬性之間加一個(gè) -
</script>
</body>
</html>
- 繼承
繼承的幾種方式
1.ES6 extends
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>繼承</title>
</head>
<body>
<script>
// 繼承實(shí)現(xiàn)的原理:通過(guò)原型鏈 實(shí)現(xiàn)的繼承
// 抽象出共有的屬性或者方法
// ES6
class People{
constructor(name,age,skin){
this.name = name,
this.age = age,
this.skin = skin
}
eat(){
console.log('吃飯')
}
sleep(){
console.log('睡覺')
}
speak(){
console.log('說(shuō)話')
}
}
// 繼承 extends
class Student extends People{
constructor(name,age,skin,id,classs){
super(name,age,skin)
this.id = id,
this.classs=classs
}
study(){
console.log('讀書')
}
}
var ren = new Student('張三',14,'yellow',01,'學(xué)生')
// 控制臺(tái)可見，eat方法在對(duì)象ren的原型 的原型里
console.log(ren.eat());
</script>
</body>
</html>
繼承的幾種方式
1.構(gòu)造函數(shù)繼承
構(gòu)造函數(shù)通過(guò)call(this)繼承另一個(gè)構(gòu)造函數(shù)（無(wú)法繼承方法或?qū)傩裕?br>
2.原型繼承
new一個(gè)構(gòu)造函數(shù)A等于另一個(gè)構(gòu)造函數(shù)B的原型，然后通過(guò)new B生成一個(gè)繼承對(duì)象（多對(duì)一，一個(gè)對(duì)象更改繼承的函數(shù)數(shù)據(jù)就會(huì)更改）
3.組合繼承
構(gòu)造函數(shù)和原型函數(shù)一起使用，更改B的原型指向自己B
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>繼承-2</title>
</head>
<body>
<script>
// 繼承的幾種方式
// 1.構(gòu)造函數(shù)繼承--------
/*
問(wèn)題:
原型上的方法或者屬性無(wú)法繼承
*/
function Fn(){
this.name = '張三',
this.eat = function(){
console.log('eat');
}
}
function F(){
// call(obj,'') apply(abj,[]) 函數(shù)自帶的方法 上下文 前面?zhèn)鲄⒁粯雍竺娌灰粯? // 使用call和apply更改this指向
Fn.call(this)
// 這個(gè)時(shí)候的this相當(dāng)于f，于是乎Fn里的this相當(dāng)于替換成了f這樣便達(dá)到了繼承的效果
console.log(this); // f
}
var fn = new Fn();
console.log(fn);
var f = new F();
console.log(f);
// 2. 原型繼承
// 問(wèn)題: 公用一個(gè)原型對(duì)象，就會(huì)導(dǎo)致，一個(gè)修改了原型對(duì)象的值其余所有的都會(huì)被修改
function Fun(){
this.name = '張三',
this.color = ["1","2"]
this.eat = function(){
console.log('eat');
}
}
Fun.prototype.sleep=function(){
console.log('睡覺');
}
function X(){
}
X.prototype = new Fun();
var x = new X();
// 這個(gè)就可以繼承Fun的原型上的方法
console.log(x);
var a = new X();
var b = new X();
a.color.push('李四');
console.log(b.color); // 更改a但是b的color也更改了
// 3.組合方式
function Fy(){
this.name = '張三',
this.color = ["1","2"]
this.eat = function(){
console.log('eat');
}
}
function Y(){
Fy.call(this)
}
// 把Fy原型賦給Y的原型
// Y.prototype = Fy.prototype
// Object.create創(chuàng)建一個(gè)對(duì)象，里面?zhèn)饕粋€(gè)對(duì)象
Y.prototype = Object.create(Fy.prototype);
// 更改Y原型的Y指向
Y.prototype.constructor = Y
var c = new Y();
var d = new Y();
c.color.push('5');
console.log(d.color)
// typeof 判斷數(shù)據(jù)類型
// instanceof 判斷前者是否在后者的原型對(duì)象里
console.log(c instanceof Y);
console.log(c instanceof Fy);
</script>
</body>
</html>
