JavaScript进阶篇(一)

原型链

例题:

var F = function () { };
		Object.prototype.a = function () {
			console.log("aa");
		};
		Function.prototype.b = function () {
			console.log("bb");
		};
		var f = new F();
		F.a();
		F.b();
		f.a();
		f.b();
			// aa bb aa     f.b is not a function报错

闭包

1. 概念
   简单讲，闭包就是指有权访问另一个函数作用域中的变量的函数。
   MDN 上面这么说：闭包是一种特殊的对象。它由两部分构成：函数，以及创建该函数 的环境。环境由闭包创建时在作用域中的任何局部变量组成。

简单的例子:

function aa (){
	var age = 10
	 return function (num) {
		 if(num > 0) age = num;
		 return age
	 }
 }
 console.log( aa()(2) )

DOM事件

1. 添加事件的方法

		 let div = document.querySelector("div")
		 // 第一种添加点击事件的方式  这种方法会被后面的方法覆盖
		 div.onclick=function(){
			  console.log(1)
		 }
		 div.onclick=function(){
			  console.log(2)
		 }
		 // 第二种添加事件的方式
		 div.addEventListener("click",function(){
			  console.log(3)
		 })
		 div.addEventListener("click",function(ev){
			 	console.log(ev);
			  console.log(4);
		 })

2. 事件代理 (比如说想在每一个li上面 添加一个点击事件)

	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>

		//var lis = document.querySelectorAll("li")
		//lis.forEach(item=>{ //这种特别消耗性能而且不推荐
		//	 item.addEventListener("click",function(ev){
		//		  console.log(this.innerHTML)
		//		  console.log(ev.currentTarget)
		//	 })
		//})

		// 事件代理： 将我们li的事件代理到他们的父元素上
		var ul = document.querySelector("ul")
		ul.addEventListener("click", function (ev) {
			console.log(ev.target.innerHTML)
			console.log(this)
			console.log(ev.currentTarget)
		})

自定义事件

	<div>
		 111
	</div>

   //let div = document.querySelector("div");

     var ev = new Event("aa") 

		// document.addEventListener("keydown",function(ev){
		//	  console.log(ev)
		// })
		 
		 setTimeout(()=>{  //一秒后触发自定义事件 手动触发的事件 可以加一些条件
				div.dispatchEvent(ev)
		 },1000)

事件

1. 实现一个div 随着上下左右键 来移动

简单例子:

<div class="one" style="top:10px"></div>
	<style>
		 div{
			 width: 100px;
			 height: 100px;
			 background: red;
			 position: absolute;
			 top:100px;
			 left: 0;
			 transition: all 0.2s;
		 }
		 .one{
			 margin-top: 10px;
		 }
	</style>

var div = document.querySelector("div")

		 var x = 0 
		 var y = 0
		 document.addEventListener("keydown",function(ev){
			  console.log(ev)
				var flag = ev.code
				switch(flag){
					case "ArrowUp":
					  x -=50
						div.style.top = x + "px"
						break;
					case "ArrowDown":
						x +=50
						div.style.top = x + "px"
						break;
					case "ArrowLeft":
						y -=50
						div.style.left = y + "px"
						break;
					case "ArrowRight":
						y +=50
						div.style.left = y + "px"
						break;
				}
		 })

ES6继承

 class Peopel{ //定义一个people类
			constructor(name,age){
				 this.name = name
				 this.age = age
			}
			eat(){}
			speak(){}
		}
	console.log( new Peopel() ) //输出people实例
	
	class ChinesePeople extends Peopel{ //定义一个ChinesePeople类继承People
		constructor(name,age,id){
			 super(name,age)
			 this.id = id
		}
	}


//注意javascript不能继承多个
	class Student extends ChenesePeople{ //定义一个 Student类 继承ChinesePeople类
		 constructor(name,age,id){
				 super(name,age,id)
			}
	}
	console.log( new Student() )  //输出实例    在其原型链上可以找到属性和方法

ES5实现继承的其中三个方法(组合式用的最多)

1. eg:

		 // 构造函数实现继承
		 function AA(name,age ){
			  this.name = name;
				this.age = age;
				this.fun = function(){
				}
		 }
		 AA.prototype.say=function(){}
		 function BB(){
			 console.log(this)
			  AA.call(this)
		 }
		 
		console.log( new AA() )
		console.log( new BB() )

2. eg:

	// 原型式继承
		function AA(name,age ){
			  this.name = name;
				this.age = age;
				this.color= ["red","yellow"]
				this.fun = function(){
				}
		 }
		 AA.prototype.say=function(){}
		 function BB(){
		 }
		 BB.prototype = new AA()
		 
		// console.log( new AA() )
		console.log( new BB() )
		let b = new BB()
		let b1 = new BB()

		b.color.push("black")

		console.log( b1.color )

3. 组合模式

	// 组合方式继承：
		function AA(name,age){
			this.name = name;
			this.age = age;
			this.fun = function(){}
		}
		AA.prototype.say=function(){}

		function BB () {  
			 AA.call(this)
		}
		BB.prototype = AA.prototype
		// BB.prototype.constructor = BB
		console.log(new BB())

	console.log(Object.create({}))	
	console.log({})