2020-01-09 Ch5引用类型II

5.5 Function类型

函数是对象,函数名是指针。

每个函数都是Function类型的实例,且都与其他引用类型一样具有属性和方法。函数名实际上是一个指向函数对象的指针,不会与某个函数绑定。

函数定义:

  1. 使用函数声明语法:
function sum(num1, num2){
    return num1 + num2;
}
  1. 使用函数表达式定义函数:
var sum = function(num1, num2){
    return num1 + num2;
};

定义变量sum并将其初始化为一个函数。
NOTE:
在使用函数表达式定义函数时,没必要使用函数名,通过变量sum即可引用函数。
函数末尾有一个分号,就像声明其他变量时一样。

  1. 使用Function构造函数。(不推荐)

重要---Example:

function sum(num1, num2){
  return num1 + num2;
}
alert(sum(10,10));    //20

var anotherSum = sum;   //使用不带圆括号的函数名是访问函数指针,而非调用函数。
alert(anotherSum(10,10));

sum = null;
alert(anotherSum(10,10)); //20
5.5.1 没有重载:变量覆盖
image.png
5.5.2 函数声明与函数表达式
alert(sum(10,10));
//函数声明语句:
function sum(num1, num2){
    return num1 + num2;
}

虽然上面代码funtion sum的声明在调用它代码后面,但是会正常执行的。

解释:在代码执行之前,解析器通过一个名为函数声明提升的过程,读取并将函数声明添加到执行环境中。对代码求值时,JS引擎在第一遍会声明函数并将它们放到源代码树的顶部。

alert(sum(10,10));
//变量初始化语句:
var sum = function(num1, num2){
    return num1 + num2;
}

上述代码会产生错误,原因:函数位于一个初始化语句中,而不是一个函数声明。
即: 在执行到函数所在语句之前,变量sum中不会保存有对函数的引用;且第一行代码就会导致unexpected identifier错误,也不会执行到下一行。

5.5.3 作为值的函数

ECMAScript中的函数名本身就是变量,所以函数也可作为值来使用。

  1. 像传递参数一样把一个函数传递给另一个函数;
function add10(num){
    return num + 10;
}
var result1 = callSomeFunction(add10, 10);   //add10无括号
alert(result);    //20

看callSomeFunction里面的传的函数,我们在这里访问的是函数的指针。
***要访问函数的指针而不是执行函数的话,必须去掉函数名后面的那对圆括号。

2.将一个函数作为另一个函数的结果返回。(从一个函数中返回另一个函数)

function createComparisonFunction(propertyName){
      return function(object1, object2){
            var value1 = object1[propertyName];
            var value2 = object2[propertyName];
            if(value1 < value2){
                return -1;
            }else if(value1 > value2){
                 return 1;
            }else{
                  return 0;
            }
      };
}

//调用:
var data = [{name: "Zachary", age: 28}, {name: "Nicholas", age: 29}];
data.sort(createComparisonFunction("name"));
alert(data[0].name);    //Nicholas

data.sort(createComparisonFunction("age"));
alert(data[0].name);     //Zachary
5.5.4 函数内部属性

函数内部有两个特殊的对象:arguments和this。

  1. arguments: 类数组对象,包含着传入函数的所有参数。主要用途是保存函数参数,但这个对象还有一个callee属性。

callee属性: 一个指针,指向拥有这个arguments对象的函数。为了避免类似于递归算法中对于函数名的紧耦合,采用argument.callee()来替代递归的函数(P114例子)

  1. this ----和Java类似:this引用的是函数据以执行的环境对象。

函数的名字仅仅是一个包含指针的变量而已。

  1. caller属性: 保存着调用当前函数的函数的引用。
    若是在全局作用域中调用当前函数,他的值为null.
5.5.5 函数属性和方法

ECMAScript中的函数是对象,因此函数也有属性和方法。每个函数包含两个属性:length和prototype。

length: 表示函数希望接收的命名参数的个数。
prototype: 对于引用类型而言,prototype是保存他们所有实例方法的真正所在。

面试考点

每个函数都包含 两个非继承而来的方法:apply()和call()
-------- apply和call作用相同,区别仅在于接收参数的方式不同。
用途:1. 传递参数------------在特定的作用域中调用函数,实际上等于设置函数体内this对象的值。2. 扩充函数赖以运行的作用域。(真正强大的地方)
使用call()或apply()来扩充作用域的最大好处:对象不需要与方法有任何耦合关系。

apply(): 接收两个参数。一个是在 其中运行函数的作用域(this); 另一个是参数数组。
第二个参数可以是Array实例,也可使arguments对象。

因为callSum1是在全局环境中调用的,所以传入的this是window对象。

function sum(num1, num2){
      return num1 + num2;
}
function callSum1(num1, num2){
      return sum.apply(this, arguments);
}
function callSum2(num1, num2){  
      return sum.apply(this, [num1, num2]);
}
alert(callSum1(10,10));         // 20   
 //arguments参数就是10,10; 这里因为是在全局环境中调用的,所以传入的this是window对象。1,2都一样。 
alert(callSum2(10,10));    // 20

call(): 两个参数。第一个参数和apply一样是this值,即其中运行函数的作用域;其余参数都直接传递给函数。即:在使用call方法时,传递给函数的参数必须逐个列举出来。

function sum(num1, num2){
    return num1 + num2;
}
function callSum(num1, num2){
    return sum.call(this, num1, num2);
}
alert(callSum(10,10));       //20

bind(): 这种方法会创建一个函数实例,其this值会被绑定到传给bind()函数的值。

window.color = "red";
var o = {color: "blue"};
function sayColor(){
    alert(this.color);
}
var objectSayColor = sayColor.bind(o);     
//使用bind方法创建了一个函数实例,this值显然绑定的是被传给bind的这个对象o的值。因此,即使在全局作用域中调用这个函数,也会看到"blue"。
objectSayColor();      //blue

对用途2一点说明:能够扩充函数赖以运行的作用域。(真正强大的地方)

window.color = "red";
var o = {color: "blue"};

function sayColor(){
      alert(this.color);
}
sayColor();      //red
//下面两种是显式地在全局作用域中调用函数的方式
sayColor.call(this);    //red
sayColor.call(window);    //red
sayColor.call(o);      //blue

apply()和call()如何选择?取决于你采用哪种给函数传递参数的方式最方便。
如果你打算直接传入arguments对象,或者包含函数中先接收到的也是一个数组,使用apply();否则选择call()。在不给函数传递参数的情况下,使用哪个方法都无所谓。

5.6 基本包装类型(Wrap)

3个特殊的引用类型:Boolean, Number 和 String
实际上,每当读取一个基本类型值的时候,后台就会创建一个对应的基本包装类型的对象,从而让我们能够调用一些方法来操作这些数据。

var s1 = "some text";
var s2 = s1.substring(2);

按常理,s1是基本类型,基本类型不是对象,不应该有方法。但这里s1却调用了substring方法。

当第二行代码访问字符串时,访问过程处于一种读取模式,也就是要从内存中读取这个字符串的值。而在读取模式中访问字符串时,后台会自动完成下列处理。
(1)创建String类型的一个实例;
(2)在实例上调用指定的方法;
(3)销毁这个实例。

想象成代码:

var s1 = new String("some text");
var s2 = s1.substring(2);
s1 = null;

上述步骤同样适用于Boolean和Number类型对应的布尔值和数字值。

引用类型与基本包装类型的主要区别:对象的生存期。
解释:
使用new操作符创建的引用类型的实例,在执行流离开当前作用域之前都一直保存在内存中。
自动创建的基本包装类型的对象,只存在于一行代码执行瞬间,然后立即被销毁。
Which means 我们不能在运行时为基本类型值添加属性和方法。

var s1 = "some text";
s1.color = "red";         //第二行创建的String对象在执行第三行代码时已经被销毁了
alert(s1.color);    //undefined

对基本包装类型的实例调用typeof会返回object,
而且所有基本包装类型的对象都会被转换为布尔值true。

使用new调用基本包装类型的构造函数,与直接调用同名的转型函数不同。

var value = "25";
var number = Number(value);
alert(typeof number);        //"number" 变量number保存的是基本类型的值25

var obj = new Number(value);
alert(typeof obj);    //"object" 变量obj保存的是Number的实例

每个基本包装类型都提供了操作相应值的便捷方法:

5.6.1 Boolean类型

创建Boolean对象,像下面这样调用Boolean构造函数并传入true或false值。

var booleanObject = new Boolean(true);

基本类型与引用类型的布尔值区别:

  1. typeof 对基本类型返回"boolean", 对引用类型返回"object";
  2. instanceof 测试 Boolean会返回true, 测试基本类型的布尔值会返回false。
    因为Boolean对象是Boolean类型的实例。
    Boolean类型的实例重写了valueof(),toString()方法。
5.6.2 Number类型

创建Number对象,可以在调用Number构造函数时向其中传递相应的数字。

var numberObject = new Number(10);
5.6.3 String类型

String类型是字符串的对象包装类型,可像下面这样使用String构造函数来创建。

var stringObject = new String('hello world");

String继承的valueOf(),toLocaleString()和toString()方法,都返回对象所表示的基本字符串值。
String类型的每个实例都有一个length属性,表示字符串中包含多个字符。
Note: 即使字符串中包含双字节字符(不是占一个字节的ASCII字符),每个字符也仍然算一个字符。

  1. 字符方法
    用于访问字符串中特定字符的方法:charAt(), charCodeAt(),方括号加数字索引来访问
    note: charCodeAt()返回的是字符的字符编码。
var stringValue = "hello world";
alert(stringValue[1]);   //"e"

2.字符串操作方法(下列操作方法都不会修改字符串本身的值,他们只是返回一个基本类型的字符串值)
concat(): 拼接字符串。但更多使用+,更简便易行。
slice()
substr()
substring()
(具体函数区别见P124,以及传入的参数是负值的处理情况)

  1. 字符串位置方法
  2. 字符串trim()方法
  3. 字符串大小写转换方法
  4. 字符串模式匹配
    7.localeCompare
    8.fromCharCode
    9.HTML
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,558评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,002评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,024评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,144评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,255评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,295评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,068评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,478评论 1 305
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,789评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,965评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,649评论 4 336
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,267评论 3 318
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,982评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,223评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,800评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,847评论 2 351

推荐阅读更多精彩内容