JS整理(1)

浏览器内核

常用的浏览器内核:

-谷歌浏览器(chrome): Webkit内核 (V8引擎)

    safari、大部分国产浏览器(360 搜狗 QQ UC 猎豹 百度....)、安卓和IOS大部分手机浏览器...

-火狐浏览器(firefox): Geoko内核

- Opera浏览器: Presto内核

-IE浏览器:Trident 内核

什么是浏览器内核?作用:

>前端开发需要使用html/css/js编写代码 编写的代码要遵循w3c规范

>浏览器开发商开发的浏览器 目的就是为了按照w3c的规范 识别出开发者编写的代码 并在页面中绘制出开发者预想的页面和效果(GPU:显卡) 我们吧浏览器中识别代码绘制页面的东西成为‘浏览器内核或者渲染引擎’

>浏览器兼容:

>1. w3c发布的规范都是开发者们不断尝试总结下来的产物 例如谷歌开了一个css属性(border-radius)快速实现圆角,火狐浏览器发现很好用 也实现了这个属性 (-moz-border-redius)

>2. 每个浏览器为了彰显自己的不一样 不按照标准来 但是把标准中规定的效果用另外一种方式实现 所以我们编写代码的时候需要两套

javascript面向对象中继承实现

面向对象的基本特征有:封装、继承、多态

在JavaScript中实现继承的方法:

    1. 原型链(prototype chaining)

JS整理(1)_第1张图片
prototype原型链方式

    2. call()/apply()

JS整理(1)_第2张图片
call()/apply()方法

    3. 混合方式(prototype和call()/apply()结合)

JS整理(1)_第3张图片
混合方法【prototype,call/apply】

    4. 对象冒充

JS整理(1)_第4张图片
对象冒充方式

js闭包

闭包:有权访问另一个函数作用域内变量的函数都是闭包

JS整理(1)_第5张图片

js面向对象编程


JS导入方式

1. 行内导入(不安全) 

2. 内嵌式 

3. 外链式

真实项目中 一般会把CSS放在Body上面 把JS放在body的末尾(约定俗成的规范)

控制JS在html结构加载完成后加载?

>1. window.onload = function(){}

>2. $(document).ready(function(){})  页面结构加载完 执行

    window.addEventListener('load',function(){},false)

前端工作:1.从UI设计师那拿到设计稿(静态图片:psd)使用html+css把图片变为静态的html页面

                  2. 使用JS写一些用户交互的效果 JS可以操作页面中的html标签(DOM元素)

JS输出方式

1. alert : 浏览器弹出一个提示框(确定按钮)

    alert都是把要输出的内容首先转换为字符串然后再输出的(调用了toString方法)

2. confirm 

    在alert的基础上增加让用户选择的按钮(确定 取消)

    var confirm = confirm('are you sure?');    alert(confirm)

    点击确定的时候 接收到true ;取消的时候 接收到 false

3. prompt 

    在confirm基础上增加让用户输入的效果

    用户点击取消按钮 接收到 null  ;点击确定按钮 接收到用户输入的内容 如果用户没有输入任何内容 接收到 空字符串

真实项目中 需要样式精美的网址中 提示框一般都是自己封装的插件和组件 不会用内置的(使用原生JS封装模态框组件)

控制台打印:

console.log()在控制台中打印,打印任意字符或者js的变量信息,可以接受任何字符串、变量、数字、对象;

console.dir()可以打印一个对象的所有属性和方法,为详细打印;

console.table()在控制台打印,以表格的形式呈现打印的内容;展现的更完美;

JS的组成部分

1、ECMAScript(ES):规定了JS一些基础语法 (变量 数据类型语法规范 操作语句)

2、DOM (document object model)文档对象模型 : 提供了一些属性和方法可以让我们操作页面中的元素

3、BOM(brower object model)浏览器对象模型: 提供了一些属性和方法可以操作浏览器

JS命名规范

1. JS 严格区分大小写

2. 遵循国际命名规则 驼峰命名法

3. 命名的时候可以使用 $ 、_ 、数字、字母,但是数字不能作为名字的第一位

    var $xxx; // 一般是应用JQ获取到的值

    var _xxx; //一般是全局变量或者公用的变量

4. JS很多词都是有特殊含义的 这类词叫 关键字;现在没有特殊含义 以后可能作为关键词的 叫做 保留字 ;关键字和保留字都不能用来命名

JS 数据类型

1. 基本数据类型(值类型):number、string、boolean、null(空对象指针)、undefined(未定义)

    boolean:true  false

   1> Boolean():只有0、-0、null、""、false、undefined 或 NaN  转化为false,其余转化为true

    2>在js中 ‘’或者“”包起来的都是字符串

    3>NaN 不是一个数 但是属于number类型

        NaN==NaN :false; NaN 和任何值都不相等

        isNaN() 用来检测这个值是否是有效数字 如果不是则检测结果是true,反之为false

        检测的值不是number类型 浏览器会默认把值先转换为number类型 然后再去检测

    isNaN(0) =>false

    isNaN(NaN) =>true

    isNaN( [] ) =>false

    4>number()  :在使用的时候只要字符串中出现任何一个非有效数字字符 最后的结果都是NaN;

    number(true) =>1

    number(false) =>0

    number(null) =>0

    number(undefined) =>NaN

    number([])->把引用数据类型转换为number:首先需要把引用数据类型转为字符串(toString),再把字符串转换为number即可

    number( { name: 'sukey' } ) =>NaN

2. 引用数据类型 :object(普通对象、数组 、正则)、function


javascript类型判断

1、typeof()函数

    对于原始数据类型,可以使用typeof()函数来判断他的数据类型

    typeof 运算符把类型信息当做字符串返回

    typeof(1)//number

    typeof("1")//string

    typeof(true)//boolean

    typeof(undefined)//undefined

    typeof(null)//object     其实这是JavaScript最初实现的一个错误,后来被ECMAScript沿用下来。在今天我们可以解释为,null即是一个不存在的对象的占位符,但是在实际编码时还是要注意这一特性

 typeof的缺陷:

1.null 类型返回 object

2. 无法区分对象是普通对象还是数组还是正则 都统一返回object

2、instanceof 用来判断一个变量是否是某个对象的实例

    instanceof对于引用类型的支持很好,但他是无法对原始类型进行判断,所以一般都是在typeof判断为object时才使用instanceof

3、constructor 返回对象相对应的构造函数

4.  Object.prototype.toString.call() 获取当前实例的所属类型

面试题:var a =1; console.log(typeof typeof a) 结果是?

string //不论a是何种类型的值 结果都是string

ES5、ES6的区别?

1. ES6中的let命令,声明变量,用法和var差不多,但是let是为JavaScript新增了块级作用域,ES5中是没有块级作用域的,并且var有变量提升的概念,但是在let中,使用的变量一定要进行声明;

2. ES6中变量的结构赋值,比如:var [a,b,c] = [0,1,2];

3. ES6中不再像ES5一样使用原型链实现继承,而是引入Class这个概念,听起来和Java中的面向对象编程的语法有些像,但是二者是不一样的。

4. ES6中的函数定义也不再使用关键字function,而是利用了=>来进行定义;

5. ES6中可以设置默认函数参数,如function A(x,y=9){};

6. 导出单个类   ES5里一般通过module.exports来导出; ES6里,通常用export default来实现相同的功能

null和undefined

undefined  类型只有一个值,即undefined。当声明的变量还未被初始化时,变量的默认值为undefined

null 类型也只有一个值,即null。null用来表示尚未存在的对象,常用来表示函数企图返回一个不存在的对象

' ' 相对于null来说 开辟了内存 消耗了一丢丢的性能

null和undefined区别?

null 现在没有 预期会有 也可能达不到预期 一般都是手动设置为null 后期赋值

undefined 完全不在预料内  

对象数据类型

删除对象属性 delete obj.sex;

思考题:obj[age]和obj['age']有什么样的区别?

JS整理(1)_第6张图片
obj[name] 先查找name变量值 再取obj对象中与此键对应的值

基本数据类型和引用数据类型的区别

 JS 是运行在浏览器中的(内核引擎) 浏览器会为JS提供代码执行环境(全局作用域)

    window(前端)<--->global(后端)

1. 基本数据类型是按值操作的:基本数据类型在赋值的时候 是直接把值赋值给变量即可

2. 引用数据类型是按照空间地址(引用地址)来操作的:

    var n = { name:'sukey' };

    1)先创建一个变量n

    2)浏览器会给n开辟一个内存空间 目的是把对象中需要存储的内容(键值对)分别存储在这个空间里  为了便于查找 浏览器给空间设定一个地址(16进制的)

    3)把空间的地址默认赋值给了变量


类数组:

    1》以数字作为属性名 每一个属性存储的都是获取到的一个对象, JS中这个数字属性名叫做‘索引’

    2》有一个length属性存储的是当前集合中某个对象的个数


Math数学对象

数学对象的属性:

    Math.PI:圆周率  

    Math.SQRT2  2的平方根

数学对象的方法:

    Math.abs(x)  返回数的绝对值

    Math.ceil(x)    对数进行上舍入

    Math.floor(x)   对数进行下舍入

    Math.max(x,y)  取最高值

    Math.min(x,y)   取最小值

    Math.pow(x,y)   返回x的y次幂

    Math.random()    返回0~1之间的随机数

    Math.round(x)    把数四舍五入为最接近的整数

    Math.sqrt(x)   返回数 的平方根

上下文调用

定义:执行函数的时候,会产生一个上下文的对象,里面保存变量,函数声明和this

作用:用来保存本次运行时所需要的   数据

上下文调用方式: 方法调用模式、函数调用模式、构造器调用模式、apply调用模式

参考:[https://www.cnblogs.com/ssh-007/p/5064699.html]

回调函数

回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件条件进行响应

回调函数最重要的2点:

1、一个回调函数作为参数传递给另一个函数是,我们仅仅传递了函数定义。我们并没有在参数中执行函数。我们并不传递像我们平时执行函数一样带有一对执行小括号()的函数

2、回调函数并不会马上被执行,它会在包含它的函数内的某个特定时间点被“回调”。

浏览器的事件冒泡机制

JS中事件执行的整个过程称之为事件流,分为三个阶段:事件捕获、事件目标处理函数、事件冒泡。

  当某个元素触发某个事件(如onclick),顶级对象document发出一个事件流,顺着DOM的树节点向触发它的目标节点流去,直到到达目标元素,这个层层递进、向下找寻目标点的过程为事件的捕获阶段,此过程中与事件相应的函数是不会被触发的。

  到达目标元素,便会执行绑定在此元素上的、与事件相应的函数,即事件目标处理函数阶段。

  最后,从目标元素起,再依次往顶层对象传递,途中如果有节点绑定了同名事件,这些事件所对应的函数会逐一被触发,此过程便称之为事件冒泡

阻止事件冒泡:w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true

阻止浏览器默认行为: w3c的方法是e.preventDefault(),IE是使用e.returnValue = false


(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

  IE 5.5: div -> body -> document

  IE 6.0: div -> body -> html -> document

  Mozilla 1.0: div -> body -> html -> document -> window

(2)捕获型事件(event capturing):事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。

(3)DOM事件流:同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件流会触及DOM中的所有对象,从document对象开始,也在document对象结束。


JS整理(1)_第7张图片

事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target)。

事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签

JS Date


JS整理(1)_第8张图片
日期函数
JS整理(1)_第9张图片

你可能感兴趣的:(JS整理(1))