JS9

1.原型和继承

prototype：方法（function）背后，专门保存由方法创建出来的对象的共有数据

this：this指向函数调用时所在的对象；
** this 一定是在函数内的，而且不确定指谁，谁调用时就指谁；

**构造函数/对象模板
如果想创建多个相同构造的函数的话，专门用来反复创建相同结构的对象的专门方法
**构造函数的函数名要大写，与普通函数做区分
语法：function Student (name,age){
this.name=name;
this.age=age;
}

调用方法：

var ll=new Student(“李雷”，“18”) ——new 函数名（属性值，属性值）

**this指代当前对象：永远指向函数调用时所在的对象，

原本函数： var arr=[] 创建数组
var ll={“name”:李雷，“age”:18,“height”:170;} 创建对象

**这些是“字面量函数”

之前的对象只能在一个属性中存一个数据，但是现实中需要存很多数据，比如name：李雷，韩梅梅，张三，王五，，，，

关于this 的举例：

hello

world

你好

世界

** 函数不调用不执行，就等于没写

function Student(n,a){
this.name=name
this.age=age
}
——————这就是一个模板，做好了

调用方法：

var ll=new Student(“李雷”，“18”) ——new 函数名（属性值，属性值）

console.log（li）

** var now=new Date() 就是一个例子

**new， 关键字实际上做了四件事，封装好的：
1.创建一个空对象 var li=（）
2.改变this指向，new相当于调用了函数 （call apply函数，改变this指向）
3.加属性 var li={name:“李雷”，age：18}
4.返回的一个对象， return li

2.既然是对象，就可以加属性
li.car=“bmw”;
所以，这时就是三个属性了；
其中，car属性叫做“自有属性”，属于对象实例自身的属性

3.如果想给li和hmm都加一个属性
Student.prototype.car=“bmw” (在构造函数里面加一个属性，都可以调用)

Student.prototype.car=“btw”

共有属性：由同一构造函数创建出的对象的沟通享有的属性；

**任何实例对象没有权利修改原型中的数据

var hmm=new Student("韩梅梅“，17)）——实际的构造函数调用方法

新的创建数组的方法：

var arr=new Array(1,2,3)

console.log(arr)

---

** react 和 vue 都是封装函数，更方便现实工作中工作，其实也是js，js是底层技术

**app：
1.native app （原生app）应用商店下载的，没有链接，不通过地址访问，通过启动图标访问。
优势：用户体验更友好，因为所有都下载到本地了，不用在服务器加载；
弊端：必须下载到本地，而且需要应用商店的审核
2.web app （网页app）：网页版的app，在手机上现实的网页，但是布局完全和app一样，通过地址访问；
举例：生日贺卡，网上商城等
优势；开发很快，不用被审核，不用下载，不占内存
弊端：用户体验不如原生app
3.hybrid app （混合app）：介于两者之间，开发的步骤和web一样，但套了native app的盒子。可以通过启动图标访问

** web和hybrid 都可以用前端开发，html，css，js，vue，react，java

**手机的各种功能，只有native app才能调用

**native app ：两种（andriod，swift，object-c）

**小程序的开发语言（微信ml 微信ss js）类同于 html css js

**react native可以做native app

**打包：把多个文件打包成一个文件，最后上线

作业1:写一个获取验证码的例子；

这时按钮是禁用的

作业2: 写一个选项卡，

继承：使用现有类型创造新的类型， 新的类型中可以使用现有类型的属性和方法，并且可以拓展出现有类型没有的属性和方法；

就是指li和hmm，他们就是继承

---

DOM事件

元素绑定事件的方法：
1.通过js，1)getelementById找到 2） 元素对象.οnclick=function（）{}
2.元素的开始标签中去绑定，直接类似class名字，onclick/onmouseover等

今天学第三个，就是一个元素同时绑定多个事件；

绑定事件语法：
eleObj.addEventListener(“事件名”，“方法对象”，“是否在捕获阶段触发”)

常用事件名：click,mouseOver,mouseOut,focus,blur,change

举例：

function consoleMe(){
console.log(“我执行了”)
}
function alertMe(){
alert(“我执行了”)
}

var btn=document.getElementById(“btn”)
btn.addEventListener(“click”,consoleMe,false)
btn.addEventListener(“click”,alertleMe,false)

** 现实中，都用false，没有用ture的
**低版本ie语法是不一样的
eleobj.attachEvent(“事件处理元素名”，“方法对象”)

去除：
eleObj.removeEventListener(“事件名”，“方法对象（函数名）”，“是否在捕获阶段触发”)

事件触发周期：事件捕获-目标触发-事件冒泡

举例：

function highlight(){
this.style.background=“yellow”
alert(this.className)
this.style.backgroud=""
}

var divs=document.getElementByTagName(“div”)
for(var i=0,i<divs.length,i++){
div[i].addEventListener(“click”,highlight,false)
}

1.定时器：

timer=null;

2.选项卡

**重复的代码一定能简化：
1.传参数
2.循环

举例：

var divs=document.getElementByTagName(“div”)

for(var i=0;i<divs.length;i++){
divs[i].οnclick=function(){
this.style.background=“yellow”;
alert(this.classname);
this.style.background;
}
}

**（函数里）事件对象

**阻止冒泡
function(e){
e.stopPropagation()
}

**e.target 是可以拿到事件源对象，比this更精准
平时会优先选择this，但是voe中会用e.target