JS笔记整理

JS执行前,浏览器会给一个全局作用域window

window分为两个模块 一个存储模块 一个执行模块

存储模块 找到所有的var和function关键字 给这些变量添加内存地址

窒息感模块 代码从上到下执行 遇到变量就回去存储模块查找 有和没有

有就看你赋值没有 赋值了就是后面的值 没有复制就是undefined了

如果么哦又找到 结果就是XXX is not defined

作用域:浏览器给JS的一个生存环境(也叫栈)

作用域链:函数内部的变量被使用时首先会在自己的似有作用域下查找是否有这个变量,有就直接使用,没有就会向他的上一级查找,腹肌就是用腹肌的,父级没有就会以此继续向上查找直到window为止,window有就使用没有就is not defined。这种查找机制我们叫作用域链。

原型链:

对象.属性的时候 首先看着哥哥属性是不是私有的 私有的就直接使用如果私有的属性没有 就着公有的 共有的有就使用 没有就按照__proto__找他的类上有没有 直到找到基类object没有就undefined了这种查找机制叫原型链

原型:

1.首先类身上天生自带一个prototype的属性 属性值是对象

2.prototype对象天生有一个constructor属性 属性值是类本身

3.实例天生有一个__proto__指向自己类的原型

变量:

可以改变的量 往往用英文字母代替变量 并且区分大小写

变量其实就是一个容量 起到临时存储数据的作用 通过等号赋值

基本数据类型:undefined string boolean null number

引用数据类型:object array function

二者的区别:

基本数据类型就是简单的操作值

引用数据类型会开辟一个新的内存空间的地址赋值给变量

this :

this是JS的一个关键字 指定一个对象然后去替代它  分两种情况

函数内的this跟函数在哪里定义没有关系只跟执行时的主体有关 带.的主体就是.前面的对象 如果不带.就是window 找主体的时候就看这个函数(方法)带不带.如果函数和方法执行了带.那么this就指向.前面的对象 如果不带.就指向window

自执行函数里面的this和定时器的this都指向window 事件里面的this指向触发事件的元素

构造函数里的this指向他的实例

堆内存:就是存放代码块的  存放形式有两种 一种是以键值对的形式存放的

另一种就是函数 以字符串的形式存放的

栈内存:函数执行的时候首先会开辟一个新的内存空间叫栈内存(环境或作用域)

闭包:

函数在调用的时候 会形成一个私有作用域 内部的便令不会被外面访问 这种保护机制叫闭包

面向对象:(在JS里就是构造函数)

通过函数封装得到一个类 通过类可以实例处他的子对象 自实例对象有自己私有的属性

也有可继承的属性: 判断子实例的属性是共有还是私有 在自己里面的属性是私有的可继承

的是共有的 而子实例对吸那个在操作自己的属性的时候 首先判断属性是私有的还是共有的

私有的就直接使用 共有的按照原型链__proto__向上查找

面向对象重点:类 原型 原型链 封装 继承

封装:减少代码冗余

继承:减少内存消耗 重复使用的代码写一遍就行了

多态:

目的:生成一些具有功能的对象  一个叫属性一个叫方法

基类object的子类:

function array number boolean string  date math regexp

函数 数组 数字 布尔 字符串 日期 算数 正则(都是类 本质都是函数)

 

null和udefined的区别

null和undefined都表示没有值

null是这个东西存在但是没有赋值

undefined这个东西压根就不存在 是人为定义的

DOM回流

页面渲染时 我们队HTML结构简单的增删查改时 浏览器会对所有的DOM进行重新排列就叫DOM回流

严重影响浏览器的性能

事件冒泡:

当给父子元素的同一事件绑定时,出发了子元素身上的事件执行完毕后 也会触发父级相同元素的相同事件

这种传播机制叫事件冒泡

事件捕获:

给父子元素用addEventListener()绑定同一个事件时 当初发子元素身上的事件会西安出发父元素身上的事件

然后再传递给子元素  这种传播机制叫事件捕获

 DOM2级追踪及标准和非标准浏览器的区别:

1.写法  标准:addEventListener()  非标准:attachEvent()

2.前者指向触发事件的元素  后者指向window

3.前者不带on   后者带on

4.attachEvent只在ie8一下使用       addEventLisstener()只在标准浏览器下

5.attaachEvent只有冒泡没有捕获   addEventListener只有冒泡也有捕获

DOM0级和DOM2级的区别:

①DOM0级如果绑定多个相同的事件 后者会覆盖前者 dom2级不会
②DOM0级只适合普通事件 DOM2级还有指定的事件类型
如DOMContentLoaded(当html文档结构加载完成之后执行)这个事件就是jquery中的$(document).ready()
③事件取消DOM0级直接赋值null就ok了 DOM2级事件需要使用div.removeEventListener( )

事件绑定的两种写法:

DOM0级:div.onclick=function(){}

DOM2级:addeventListener('click',function(){},false)

事件对象event

当用户触发一个事件时 浏览器所有详细情况都存在一个叫event的对象上  我们把它叫事件对象

参数对象arguments
每一个函数都有一个参数对象 他是这个函数所有参数构成的集合

阻止事件冒泡的兼容性解决方法:
event.stopPropagation?event.stopPropagation():event.cancelBubble=true;

阻止事件默认行为兼容性写法:
event.preventDefault?event.preventDefault():event.returnValue=false;

捕捉事件源的兼容性写法
var target = event.target || event.srcElement

事件委托
如果子元素身上绑定大量相同事件的时候 我们尽量采用事件委托 所有子元素把自己的事件委托给了父级

posted @ 2018-12-14 15:58  安文莹  阅读(270)  评论(0编辑  收藏  举报