JavaScript函数、闭包、原型、面向对象学习笔记


Posted in Javascript onSeptember 06, 2018

断言

单元测试框架的核心是断言方法,通常叫assert()。

该方法通常接收一个值--需要断言的值,以及一个表示该断言目的的描述。

如果该值执行的结果为true,断言就会通过;

否则,断言就会被认为是失败的。

通常用一个相应的通过(pass)/ 失败(fail)标记记录相关的信息;

function assert(value, desc) {
  let li = document.createElement('li');
  li.className = value ? 'pass' : 'fail';
  li.appendChild(document.createTextNode(desc));
  document.getElementById('results').appendChild(li);
}

// 断言函数
function assert(value, desc) {
  if (value) {
    console.log(`\033[32m ${desc} \033[0m`);  // 断言通过 绿色字体
  } else {
    console.log(`\033[31m ${desc} \033[0m`);  // 断言失败 红色字体
  }
}

函数

  • JavaScript是一门函数式语言
  • 在JavaScript中,函数是第一型对象。函数可以共处,可以视作为其他任意类型的对象。就像普通的JavaScript数据类型,,函数可以被任意变量进行引用,或声明成对象字面量,甚至可以将其作为函数参数进行传递。
  • 函数是第一型对象
  • 可以通过字面量进行创建。
  • 可以赋值给变量、数组或其他对象的属性。
  • 可以作为参数传递给函数。
  • 可以作为函数的返回值进行返回。
  • 可以拥有动态创建并赋值的属性。
  • 命名一个函数时,该名称在整个函数声明范围内是有效的。如果函数声明在顶层,window对象上的同名属性则会引用到该函数。
  • 所有的函数都有一个name属性,该属性保存的是该函数名称的字符串。匿名函数的name属性值为空。
  • 在JavaScript中,作用域是由function进行声明的,而不是代码块。声明的作用域创建于代码块,但不是终结于代码块(其他语言是终结于代码块的)
if (window) {
  var x = 123;
}
alert(x);

执行代码后,会弹出123,是因为JavaScript在大括号关闭处并没有终止其作用域。

  • 变量声明的作用域开始于声明的地方,结束于函数的结尾,与代码嵌套无关。
  • 命名函数的作用域是指声明该函数的整个函数范围,与代码嵌套无关;
  • 对于作用域声明,全局上下文就像一个包含页面所有代码的超大型函数。
  • 所有的函数调用都会传递两个隐式参数:argument和this

作为函数进行调用

如果一个数不是作为方法、构造器、或者通过apply()或call()进行调用的,则认为它是“作为函数”进行调用的。

function ninja() {};
ninja()

var samurai = function() {};
samurai()
  • 以这种方式调用时,函数的上下文是全局上下文---window对象。

作为方法进行调用

当一个函数被赋值给对象的一个属性,并使用引用该函数的这个属性进行调用时,那么函数就是作为该对象的一个方法进行调用的。

var 0 = {};
o.whatever = function() {};
o.whatever();
  • 将函数作为对象的一个方法进行调用时,该对象就变成了函数上下文,并且在函数内部可以以this参数的形式进行访问。

作为构造器进行调用

  • 将函数作为构造器进行调用,需要在函数调用前使用new关键字

创建一个新的空对象;

传递给构造器都对象是this参数,从而成为构造器的函数上下文;

如果没有显式都返回值,新创建的对象则作为构造器的返回值进行返回。

function Ninja() {
  this.skulk = function() { return this; }
}

var ninja1 = new Ninja();
var ninja2 = new Ninja();

构造器的目的是通过函数调用初始化创建新的对象。

函数调用方式差异

  • 函数调用方式之间点主要差异是:作为this参数传递给执行函数的上下文对象之间点区别。

作为方法调用,该上下文是方法的拥有者;
作为全局函数进行调用,其上下文永远是window(也就说,该函数是window的一个方法)。
作为构造器进行调用,其上下文对象则是新创建的对象实例。

使用apply()和call()方法

  • 通过函数的apply()方法来调用函数,需要给apply()传入两个参数:一个是函数上下文的对象,另一个是作为函数参数所组成的数组;
  • 通过函数的call()方法来调用函数,需要给call()传入两个参数:一个是函数上下文的对象,另一个是作为函数参数的参数列表,而不是单个数组;
function juggle() {
  var result = 0;
  for (var n = 0; n < arguments.length; n++) {
    result += arguments[n]
  }
  this.result = result;
}
var ninja1 = {};
var ninja2 = {};

juggle.apply(ninja1, [1,2,3,4]);
juggle.call(ninja2, 5,6,7,8)

assert(ninja1.result === 10, 'juggled via apply');
assert(ninja2.result === 26, 'juggled via call');

使用apply()和call()可以选择任意对象作为函数上下文;

函数总结

函数是第一型对象;

  • 通过字面量进行创建。
  • 赋值给变量或属性。
  • 作为参数进行传递。
  • 作为函数结果进行返回。
  • 拥有属性和方法。

函数是通过字面量进行创建的,其名称是可选的。

在页面生命周期内,浏览器可以将函数作为各种类型的事件处理程序进行调用。

变量的作用域开始于声明处,结束于函数尾部,其会跨域边界(如:大括号)

内部函数在当前函数的任何地方都可用(提升),即便是提前引用。

函数的形参列表和实际参数列表的长度可以是不同的。

  • 未赋值的参数被设置为undefined。
  • 多出的参数是不会绑定到参数名称的。

每个函数调用都会传入两个隐式参数。

  • arguments,实际传入的参数集合。
  • this,作为函数上下文的对象引用。

可以用不同的方法进行函数调用,不同的调用机制决定了函数上下文的不同。

  • 作为普通函数进行调用时,其上下文是全局对象(window)。
  • 作为方法进行调用时,其上下文是拥有该方法的对象。
  • 作为构造器进行调用时,其上下文是新分配的对象实例。
  • 通过函数的apply()或call()方法进行调用时,上下文可以设置成任意值。

匿名函数

为了不让不必要的函数名称污染全局命名空间,可以创建大量的小型函数进行传递,而不是创建包含大量命令语句的大型函数。

递归

  • 递归:当函数调用自身,或调用另外一个函数,但这个函数的调用树中的某个地方又调用到了自己时,就产生了递归。
  • 递归的两个条件:引用自身,并且有终止条件。

闭包

  • 闭包是一个函数在创建时允许自身函数访问并操作该自身函数之外的变量时所创建的作用域
  • 闭包可以让函数访问所有的变量和函数,只要这些变量和函数存在于该函数声明时的作用域内就行。
var outerValue = 'ninja';

var later;


function outerFunction() {

  // 该变量的作用域限制在该函数内部,并且在函数外部访问不到;
  var innerValue = 'samurai';

  // 在外部函数内,声明一个内部函数。
  // 注意:声明该函数时,innerValue是在作用域内的
  function innerFunction() {
    assert(outerValue, 'I can see the ninja');
    assert(innerValue, 'I can see the samurai');

    // 将内部函数引用到later变量上,由于later在全局作用域内,所以可以对它进行调用。
    later = innerFunction;
  }
}

// 调用外部函数,将会声明内部函数,并将内部函数赋值给later变量。
outerFunction();

// 通过later调用内部函数。
// 我们不能直接调用内部函数,因为它的作用域(和innerValue一起)被限制在outerFunction内。
later();

闭包使用场景:私有变量

在构造器内隐藏变量,使其在外部作用域不可访问,但是可以存在于闭包内。

function Ninja() {
  var feints = 0;

  this.getFenits = function() {
    return feints;
  }

  this.feint = function() {
    feints++;
  }
}

var ninja = new Ninja();

ninja.feint();

assert(ninja.getFenits() === 1, '调用一次,内部变量++');

assert(ninja.feints === undefined, '函数外部不可访问')

变量的作用域依赖于变量所在的闭包

闭包记住的是变量的引用,而不是闭包创建时刻该变量的值

原型与面向对象

  • 所有的函数在初始化时都有一个prototype属性,该属性的初始值是一个空对象。
  • 使用new操作符将函数作为构造器进行调用的时候,其上下文被定义为新对象的实例。
  • 在构造器内的绑定操作优先级永远高于在原型上的绑定操作优先级。因为构造器的this上下文指向的是实例自身,所以我们可以在构造器内对核心内容执行初始化操作。
  • 通过instanceof操作,可以判断函数是否继承了其原型链中任何对象的功能。
Javascript 相关文章推荐
Javascript 键盘keyCode键码值表
Dec 24 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
js基于cookie记录来宾姓名的方法
Jul 19 Javascript
Angular-Touch库用法示例
Dec 22 Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 Javascript
jsTree事件和交互以及插件plugins详解
Aug 29 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
layui使用数据表格实现购物车功能
Jul 26 Javascript
vue 项目软键盘回车触发搜索事件
Sep 09 Javascript
Vue中使用clipboard实现复制功能
Sep 05 #Javascript
vue-cli3.0配置及使用注意事项详解
Sep 05 #Javascript
Vue-cli@3.0 插件系统简析
Sep 05 #Javascript
vue实现点击选中,其他的不选中方法
Sep 05 #Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 #Javascript
Node.js 使用request模块下载文件的实例
Sep 05 #Javascript
详解Angular6学习笔记之主从组件
Sep 05 #Javascript
You might like
Smarty安装配置方法
2008/04/10 PHP
php中显示数组与对象的实现代码
2011/04/18 PHP
centos 5.6 升级php到5.3的方法
2011/05/14 PHP
简单的php数据库操作类代码(增,删,改,查)
2013/04/08 PHP
thinkPHP内置字符串截取函数用法详解
2016/11/15 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
Javascript中With语句用法实例
2015/05/14 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
javascript实现日历效果
2019/06/17 Javascript
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
深入理解Python中的元类(metaclass)
2015/02/14 Python
Python subprocess模块详细解读
2018/01/29 Python
儿童学习python的一些小技巧
2018/05/27 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
python给指定csv表格中的联系人群发邮件(带附件的邮件)
2019/12/31 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
超市实习总结自我鉴定
2013/09/19 职场文书
考试不及格检讨书
2014/01/09 职场文书
招标承诺书
2014/08/30 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
建国大业观后感800字
2015/06/01 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书