javascript视频教程(案例分析篇)

时间：2023-05-08

javascript视频教程

教程:https://www.bilibili.com/video/av765113049/

javascript视频教程案例分析篇

DOCTYPEhtml><html><head><metacharset=”utf-8″/><title>061-070章总结title>head><body><pre>061.this解析器在调用函数每次都会向函数内部传递进一个隐含的参数,
这个隐含的参数便是this，this指向的是一个目标，
这个目标咱们称为函数履行的上下文目标，
根据函数的调用办法的不同，this会指向不同的目标
1.以函数的办法调用时，this永久都是window
2.以办法的办法调用时，this便是调用办法的那个目标pre><scripttype=”text/javascript”>console.log(“第061”);functionfun61(){
console.log(this.name)
}//以函数办法调用，this是windowfun61()varobj611={
name:’obj611′,
sayName:fun61
}varobj612={
name:’obj612′,
sayName:fun61

2024澳门原料网1688白老虎
}
console.log(obj611.sayName==fun61);//truevarname=”大局name”//以办法的办法调用，this是调用办法的目标obj611.sayName()script><pre>062.this的弥补pre><scripttype=”text/javascript”>console.log(“第062″)varage=”大局age”functionfun62(){
console.log(this.name)
}varobj621={
name:’obj621′,
sayName:fun62
}varobj622={
name:’obj622′,
sayName:fun62
}
obj621.sayName()script><pre>063.运用工厂办法创立目标经过该办法能够大批量的创立目标pre><scripttype=”text/javascript”>console.log(“第063”);functioncreatePerson(name,age,gender){//创立一个新的目标varobj=newObject()//向目标中增加特点obj.name=name
obj.age=age
obj.gender=gender
obj.sayName=function(){
console.log(this.name)
}//将新的目标回来returnobj
}varobj631=createPerson(“阿三”,18,”男”)
obj631.sayName()script><pre>064.结构函数创立一个结构函数，专门用来创立Person目标的
结构函数便是一个一般的函数，创立办法和一般函数没有差异,
不同的是结构函数习惯上首字母大写
结构函数和一般函数的差异便是调用办法的不同
一般函数是直接调用，而结构函数需求运用new关键字来调用
结构函数的履行流程：
1.马上创立一个新的目标
2.将新建的目标设置为函数中this,在结构函数中能够运用this来引用新建的目标
3.逐行履行函数中的代码
4.将新建的目标作为回来值回来
运用同一个结构函数创立的目标，咱们称为一类目标，也将一个结构函数称为一个类。
咱们将经过一个结构函数创立的目标，称为是该类的实例
this的状况：
1.当以函数的办法调用时，this是window
2.当以办法的办法调用时，谁调用办法this便是谁
3.当以结构函数的办法调用时，this便是新创立的那个目标pre><scripttype=”text/javascript”>console.log(“第064”);functionPerson01(name,age,gender){this.name=namethis.age=agethis.gender=genderthis.sayName=function(){
console.log(this.name)
}
}varzhangSan=newPerson01(“张三”,30,”男”)
zhangSan.sayName()//运用instanceof能够查看一个目标是否是一个类的实例console.log(zhangSaninstanceofPerson01)//一切的目标都是Object的后代console.log(zhangSaninstanceofObject)script><pre>065.结构函数修正pre><scripttype=”text/javascript”>console.log(“第065”);/**创立一个Person结构函数
*-在Person结构函数中，为每一个目标都增加了一个sayName办法，
*现在咱们的办法是在结构函数内部创立的，
*也便是结构函数每履行一次就会创立一个新的sayName办法
*也是一切实例的sayName都是唯一的。
*这样就导致了结构函数履行一次就会创立一个新的办法，
*履行10000次就会创立10000个新的办法，而10000个办法都是一摸相同的
*这是彻底没有必要，彻底能够使一切的目标共享同一个办法*/functionPerson02(name,age,gender){this.name=namethis.age=agethis.gender=gender
}//向原型中增加sayName办法Person02.prototype.sayName=function(){
console.log(“我是”+this.name)
}varliSi=newPerson02(“李四”,25,”男”)
liSi.sayName();script><pre>066.原型目标原型prototype
咱们所创立的每一个函数，解析器都会向函数中增加一个特点prototype
这个特点对应着一个目标，这个目标便是咱们所谓的原型目标
假如函数作为一般函数调用prototype没有任何效果
当函数以结构函数的办法调用时，它所创立的目标中都会有一个隐含的特点，
指向该结构函数的原型目标，咱们能够经过__proto__来拜访该特点
原型目标就相当于一个公共的区域，一切同一个类的实例都能够拜访到这个原型目标，
咱们能够将目标中共有的内容，一致设置到原型目标中。
当咱们拜访目标的一个特点或办法时，它会先在目标自身中寻觅，假如有则直接运用，
假如没有则会去原型目标中寻觅，假如找到则直接运用
以后咱们创立结构函数时，能够将这些目标共有的特点和办法，一致增加到结构函数的原型目标中，
这样不必分别为每一个目标增加，也不会影响到大局效果域，就能够使每个目标都具有这些特点和办法了pre><scripttype=”text/javascript”>console.log(“第066”);functionMyClass(){
}
MyClass.prototype.a=”prototype的a”MyClass.prototype.sayHello=function(){
console.log(“hello”)
}varmc01=newMyClass()
console.log(MyClass.prototype)
console.log(mc01.__proto__==MyClass.prototype)
mc01.a=”mc01的a”console.log(mc01)
mc01.sayHello()script><pre>067.原型目标2原型目标也是目标，所以它也有原型，
当咱们运用一个目标的特点或办法时，会现在自身中寻觅，
自身中假如有，则直接运用，
假如没有则去原型目标中寻觅，假如原型目标中有，则运用，
假如没有则去原型的原型中寻觅,直到找到Object目标的原型，
Object目标的原型没有原型，假如在Object原型中仍然没有找到，则回来undefinedpre><scripttype=”text/javascript”>console.log(“第067”);functionMyClass02(){
}
MyClass02.prototype.name=”prototype的name”varmc02=newMyClass02()
mc02.age=18//运用in查看目标中是否含有某个特点时，假如目标中没有但是原型中有，也会回来trueconsole.log(mc02)
console.log(“name”inmc02)//true//能够运用目标的hasOwnProperty()来查看目标自身中是否含有该特点console.log(mc02.hasOwnProperty(“age”))//trueconsole.log(mc02.hasOwnProperty(“name”))//falseconsole.log(mc02.hasOwnProperty(“hasOwnProperty”))//falseconsole.log(mc02.__proto__.hasOwnProperty(“hasOwnProperty”))//falseconsole.log(mc02.__proto__.__proto__.hasOwnProperty(“hasOwnProperty”))//trueconsole.log(mc02.__proto__.__proto__.__proto__)//nullconsole.log(MyClass02)
console.log(MyClass02.hasOwnProperty(“name”))//trueconsole.log(MyClass02.hasOwnProperty(“toString”))//falseconsole.log(MyClass02.hasOwnProperty(“hasOwnProperty”))//falseconsole.log(Object)
console.log(Object.hasOwnProperty(“hasOwnProperty”))//falseconsole.log(Object.prototype.hasOwnProperty(“hasOwnProperty”))//truescript><pre>068.toString()当咱们直接在页面中打印一个目标时，事件上是输出的目标的toString()办法的回来值
假如咱们希望在输出目标时不输出[objectObject]，能够为目标增加一个toString()办法pre><scripttype=”text/javascript”>console.log(“第068″);functionPerson03(name,age,gender){this.name=namethis.age=agethis.gender=gender
}
console.log(Person03)//修正Person03原型的toStringPerson03.prototype.toString=function(){return”Person03[name=”+this.name+”,age=”+this.age+”,gender=”+this.gender+”]”}varwangSan=newPerson03(“王三”,20,”男”)varresult=wangSan.toString()
console.log(result)script><pre>069.废物收回废物收回（GC:garbagecollection）
-就像人日子的时刻长了会发生废物相同，程序运转过程中也会发生废物
这些废物积累过多以后，会导致程序运转的速度过慢，
所以咱们需求一个废物收回的机制，来处理程序运转过程中发生废物
-当一个目标没有任何的变量或特点对它进行引用，此刻咱们将永久无法操作该目标，
此刻这种目标便是一个废物，这种目标过多会占用大量的内存空间，导致程序运转变慢，
所以这种废物有必要进行清理。
-在JS中具有主动的废物收回机制，会主动将这些废物目标从内存中销毁，
咱们不需求也不能进行废物收回的操作
-咱们需求做的仅仅要将不再运用的目标设置null即可pre><scripttype=”text/javascript”>console.log(“第069″);varobj69=newObject();//对目标进行各种操作obj69=null;
console.log(obj69)script><pre>070.数组简介数组（Array）
-数组也是一个目标
-它和咱们一般目标功能类似，也是用来存储一些值的
-不同的是一般目标是运用字符串作为特点名的，
而数组时运用数字来作为索引操作元素
索引：
从0开始的整数便是索引
-数组的存储性能比一般目标要好，在开发中咱们经常运用数组来存储一些数据pre><scripttype=”text/javascript”>console.log(“第070”);//创立数组目标vararr=newArray()//运用typeof查看一个数组时，会回来objectconsole.log(typeofarr)
console.log(arrinstanceofObject)//trueconsole.log(arrinstanceofFunction)//false//向数组中增加元素语法：数组[索引]=值arr[0]=0arr[1]=1arr[5]=5arr[10]=10//读取数组中的元素语法：数组[索引]假如读取不存在的索引，他不会报错而是回来undefinedconsole.log(arr[1])
console.log(arr[2])//undefined//能够运用length特点来获取数组的长度(元素的个数)语法：数组.length//对于接连的数组，运用length能够获取到数组的长度（元素的个数）//对于非接连的数组，运用length会获取到数组的最大的索引+1,尽量不要创立非接连的数组console.log(“arr长度=”+arr.length)//11//假如修正的length大于原长度，则多出部分会空出来//假如修正的length小于原长度，则多出的元素会被删除arr.length=20console.log(arr.length)//20console.log(arr)//[0,1,empty×3,5,empty×4,10,empty×9]//向数组的最终一个方位增加元素//语法：数组[数组.length]=值;arr[arr.length]=70console.log(arr)//[0,1,empty×3,5,empty×4,10,empty×9,70]arr[arr.length]=80console.log(arr)//[0,1,empty×3,5,empty×4,10,empty×9,70,80]script>body>html>