JS高阶总结

作者: 王鳟鱼 | 来源:发表于2017-07-30 14:07 被阅读43次

1.0对象的基本概念

当我们把相对应的功能都封装到了对应的对象后,想要使用这个功能只需要找到相应的对象即可。

2.0面向对象

面向对象就是  一件事让谁来做  这个谁就是对象

面向对象过程就是  一件事该怎么做

三大特性

1. 封装性

把具体的步骤,封装到不同的对象中。对外提供接口让外部可以使用这个功能

2. 继承性

所谓继承就是自己没有, 别人有,拿过来为自己所用, 并成为自己的东西

3. 多态性  只做了解

多态只在强类型的预览中有

3.0创建对象的方法

字面量表示法  var xxx= { }

new创建方法  var xxx = new Object()

工厂模式  

构造函数  

function Person(xxxx) 构造函数首字母大写。

在使用构造函数的时候要使用new关键字,不使用new关键字会当做普通函数使用

4.0原型的基本概念

JS中创建的每一个函数都有一个 prototype 原型属性 这个属性也是一个对象  可以通过它向对象添加属性和方法在标准中,这是一个隐藏属性。该属性指向的是这个对象的原型。

5.0 原型的使用

1.可以直接把我们希望共享的属性 添加到 prototype 的属性中

2.重新为 prototype属性 赋值一个新的对象

6.0原型中的属性

通过构造函数创建的对象中 会有一个 属性 指向原型

__proto__  可以访问原型。

一般不会使用__proto__来修改

兼容不好  功耗大

constructor 属性

构造函数中有原型,原型中有constructor属性,constructor属性指向了构造函数

在编码时一般用不到 constructor 这个属性

但是如果我们在使用原型时 直接为原型 赋值 一个新的对象 为了保证他们的 三角关系存在 可以人为的把 constructor 添加进去

7.0 原型链

对象 都有原型

原型 也是对象

对象 又有原型

原型 又是对象

但是 并不是 一直找不到头

顶级的是 Object的原型

对象的.__proto__

构造函数Object.prototype

所有对象的 顶级的原型 都是 Object.prototype

这种一直查找原型的关系 称之为 原型链

8.0  object原型的常见属性

1. hasOwnProperty  对象是否拥有某个属性 只能够获取自身的属性

2. isPrototypeOf 对象a 是不是 对象b的原型

3. propertyIsEnumerable 属性 是否可以被 遍历

4. toString    toLocaleString

5. valueOf 复杂数据类型 跟普通数据类型进行运算时会调用 对象的 valueOf() 看看是否可以运算  如果还是不能运算 会接着调用 toSting()方法

8.0  Function的常见问题

Function也是构造函数  能够点出原型 

 Function的原型链的顶级 也是Object

在js中 函数也是对象

函数怎么用 函数名() $('div')

对象怎么用 对象.属性()  $.ajax()

自己写的构造函数 相当于 调用了 Function 来创建

自己定义的构造函数 相当于 创建了Function的实例对象

9.0  Function中可以使用的属性

函数直接通过console.log()无法查看属性

可以用  console.dir  来查看属性

1.  length 形参的 个数

2.  name 函数的名字

3. arguments 获取 函数被调用时 接收到的 实参  调用函数是 传入的实参个数不同 ,结果不同

4. caller  函数 在哪个函数中 被调用 返回的是谁

如果直接是在全局环境中调用的 那么为 null

主要用在 匿名函数的 递归上

10.eval 函数

js的解析器 可以把传入的 字符串解析为 js代码

可以用来解析 json

他可以解决低版本的IE中没有 JSON.parse方法的问题

eval()直接往里面写内容就会当成就是内容进行解析

面0试问题:如何解决低版本的ie中JSON.parse无法使用?

// 1.导入JSON2.js 2.eval()方法

11. 作用域 

1. 什么是作用域? --

变量的 作用范围

js中   xxx 能够创建 作用域? -- 函数

js中 有没有 块级作用域? -- 没有

2. 全局作用域

1.最外层的函数和在最外层的函数外定义的变量

2.未定义直接赋值的变量自动拥有全局作用域

12.作用域链

函数能够创建作用域

函数中 可以继续声明函数

函数能能够创建作用域

函数中 可以继续声明函数

根据这种关系创建出来的 层层叠叠的 作用域的 链式结构 称之为 作用域链

就像套娃一样一个里面套一个

13.  词法作用域  (静态作用域)

词法作用域的变量的值 跟函数调用的位置没有关系 只跟定义的位置有关

14.  变量的提升

js的代码在运行的时候有 会先进行预解析(预解析会先把函数的 变量声明 var xxx 函数的声明  function(){ }  )

这就是变量的提升 。

变量提升的特殊的情况

1.函数同名  会指定最后一个  因为从上至下运行 上面的会被覆盖掉

2.变量和函数同名  不对变量进行提升 只提升函数

3.预解析(变量的提升)是分作用域的

4.预解析(变量的提升)是分段的

预解析提升变量时 只能提升到他所在的那个 script 标签的顶部 不能跨标签

只是在预解析时要注意  执行时可以理解是在一起的

5.函数的表达式不会被提升  声明部分会被提升

6.  条件式函数声明    如果在条件语句中 定义了函数 不会直接提升函数的声明 而是把函数名作为变量 把变量名的 声明 提升

15. 递归

什么是递归:

递归就是在函数的内部 调用函数的自身  没有跳出条件的话就是死循环

设定一个跳出的条件 不能一直循环。

用递归的获取所有元素

// 找个框把找到的东西扔进去

var  tabo = [ ]

// 递归开始

function body (n){

// 先找传过来的子代

var son = n.children;

// 循环这些子代

for(var i=0; i

// 获取当前子代

var sondren = son[i];

// 把这些子代扔框里

tabo.push(sondren);

// 开始递归

body(sondren);

}

}

16.  闭包

在函数的内部定义函数。

function f1(){

function f2(){}

}

2.闭包的作用

延长变量的生命周期。

变量的封装对外提供有限的访问  避免被他人的肆意更改。

3.闭包的问题

闭包会造成内存浪费问题。

闭包不能滥用。

4.在什么地方使用

封装时会用到 。

17.  缓存

缓存作用

提升运行速度

有大小限制

如果使用的大小超过了限制

把之前缓存的东西删除

18.  自执行函数

(function( ){ }) ()

(function( ){ }( ))

自己执行自己就是自执行函数,使用 自执行函数 要注意跟 上面 和 下面 的代码隔离(;) 隔离符号

19. 沙箱

在沙箱中的操作被限死在当前作用域,不会对其他模块和个人沙箱造成任何影响。

19.each循环数组

在js的 ES5中 新添加了 forEach 循环方法

简化了for循环但是并不能完全替代它。

使用时需要传入一个  参数(是回调函数)

回调函数的的参数有(当前循环元素,当前循环元素的索引,当前循环的数组)

20.  map循环数组

map的用法跟forEach一样 它能够返回一个新的数组

map方法可以获取到 我在回调函数中 返回的元素 最后拼接成一个新的数组

21. 函数调用方法 

1. 直接调用

function eat(){}

eat();

this --->window

2.方法调用

var obj = {eat:function(){console.log(this);}}

obj.eat();

// this----> obj

// this--->obj

obj['eat']();

3. 构造函数调用

this---->指向 创建出来的对象

function Person(){

console.log(this);

}

new Person();

22.  2种创建对象的方法

1.0 工厂模式

function animalFactory(color, food) {

var obj = new Object();

console.log(this);

obj.color = color;

obj.food = food;

return obj;

}

2.0  寄生模式

function Person(color,food){this.color=color;this.food=food;}

构造函数

只要调用了 构造函数 在构造函数中的 this 指向的是 通过这个 构造函数 实例化的对象

23.  上下文的调用

函数().

函数.call(参数)

函数.apply(参数)

方法中的  this  是谁 取决于    调用    方法的方式

直接调用函数----------》  window

方法调用---------------》  对象

构造函数--------------》  实例化的对象

2.  如何在上下文调用模式下 传递参数

call 方法  如果要传递 参数 给 函数 直接在第二个参数开始 依次往后写即可

apply 方法 如果要传递 参数 给 函数 直接在第二个参数传入数组  伪数组即可

*注意

调用 call/apply方法时,如果不传入任何的参数 this 指向的是?--->window

调用 call/apply方法时,传入的如果是值类型,会被包装为对应的引用类型?

调用 call/apply方法时,传入的如果是 null undefined 指向window

24.获取类型

如何获取类型

1.0 调用 toString() 方法;

toString(); 把调用 toString的那个对象的 类型 格式化为[object Object];

Object.prototype.toString.call(arr)

2.0自己实现类似 tostring 方法

Object.prototype.mytoString = function () {

var result = '';

result += '[';

result += (typeof this);

result += ' ';

result += this.__proto__.constructor.name;

result += ']'

console.log(result);

return result;

}

相关文章

  • JS高阶总结

    1.0对象的基本概念 当我们把相对应的功能都封装到了对应的对象后,想要使用这个功能只需要找到相应的对象即可。 2....

  • js常用高阶函数总结

    分时函数 解决问题: 在渲染列表时,如果一次性渲染的列表数目过多,短时间添加大量 DOM节点会让浏览器吃不消,我...

  • [JS函数] (Array)の高阶函数

    JS函数 高阶函数 高阶函数英文叫Higher-order function。那么什么是高阶函数? JavaScr...

  • react 高阶组件

    先介绍一下高阶这个词,我们知道js里面有高阶函数,比如map、some、reduce和sort等,那么高阶组件就是...

  • react高阶组件

    react高阶组件其实就是一个函数,函数里面返回一个组件下面用代码来解释:a.js是普通组件 d.js是外层高阶组...

  • (JS) JS数组对象:迭代方法(即高阶段数)

    JS的高阶函数 语法:array.forEach(function(currentValue, index, ar...

  • js高阶函数

    一、函数作为参数传递 1、回调函数 ajax异步请求 2、Array.prototype.sort 二、函数作为返...

  • JS高阶函数

    1.map: var arr=[1,2,3,4]; arr.map(function_name); 这传入的方法会...

  • js高阶函数

    bind可以利用此种特性方便代码重用,如下,可以不同的页面中只需要配置某几项,前面几项固定的配置可以选择用bind...

  • JS 高阶函数

    最近在学习函数式编程,整个 team 都在啃一本叫《Mostly adequate guide》的函数式编程教材,...

网友评论

    本文标题:JS高阶总结

    本文链接:https://www.haomeiwen.com/subject/srghlxtx.html