【慕课网】JavaScript中函数和this

1.函数概述

JS中函数比较特殊，函数也是对象中的一种。常叫做函数对象。

所以JS函数可以像其它对象那样操作和传递，所以我们也常叫JS中的函数为函数对象。

函数的返回值依赖return，一般的函数调用：没有return就会默认在所有代码执行完返回一个undefined；
如果作为构造器，外部使用new去调用，这样没有return语句或者return后边是基本类型的话，那么会将this作为返回；反之如果return了一个对象的话，这个对象作为new构造器的返回值。

函数4调用方式(不同调用方式this指向不同)：

直接调用 foo();
对象方法 o.method();
构造器 new Foo();
call/apply/bind func.call(o);

JavaScript核心：this，arguments，构造函数，作用域，不同调用方式，不同创建方法，闭包，原型链prototype，原型继承_proto_ …

2.函数声明与表达式

定义函数的三种形式：

1.函数声明
function add(a,b){a = +a;b = +b;if(isNaN || isNaN(b)){return;}return a+b;
}2.函数表达式
// function variable
var add = function(a,b){};//IEF(Immediately Executed Function) 立即执行函数表达式
(function(){})();//first-class function 作为返回值的函数表达式
return function(){}//NFE(Named Function Expression) 已命名的函数表达式
var add = function(a,b){}3.Function构造器
var func = new Function('a','b','console(a+b);')
func(1,2);   //3var func = Function('a','b','console(a+b);')
func(1,2);   //3

附注：

一个完整语句，以function开头，例如：// 这是函数声明
function foo() {}而用括号括起来的，或者前面有一元操作符的，都是函数表达式，例如：// 函数表达式
(function foo() {})// 函数表达式
!function foo() {}// 函数表达式
+function foo() {}

函数声明和函数表达式的区别：函数声明会被前置。

// 函数声明(函数声明被提前)
var num = add(1,2);
console.log(num);   // 3 function add(a,b){return a+b;
}// 函数表达式（变量add被提前，但是是undefined）
var num = add(1,2);
console.log(num);   //undefined is not a functionvar add = function(a,b){return a+b;
}

Function构造器作用域和处理与一般函数有一定区别：

注：声明未定义和未声明的变量经过typeof都返回undefined

1.在函数构造器里面定义的变量是局部变量
Function('var localVal = "local";console.log(localVal);')();// 可以立即调用执行
console.log(typeof localVal);
// result:local,undefined （localVal仍为局部变量）2.不能访问拿到外层函数的局部变量localVal（可以拿到全局对象，但是拿不到外层局部变量）
var globalVal = 'global';
(function(){var localVal = 'local';Function('console.log(typeof localVal,typeof globalVal);')();
})();
// result: undefined,string （local不可访问，全局变量global可以访问）

函数构造器（Constructor）：

函数构造器就是可以用来构建生成新的函数或者对象的函数。

函数构造器也是一个普通函数，只不过在使用该函数构造生成新的函数或者对象的时候，该函数才会称为函数构造器。

构建的过程简单来说分两步：

1、创建一个空对象，并执行类似构造函数bind该空对象的过程。也就是把构造函数中的this指向新的空对象然后执行一遍，这个过程可以叫初始化。

2、把空对象的原型指向构造函数的原型，也就是构建原型链继承。

构建出的对象或者函数可以称为构造函数的一个实例，因为在完成初始化的过程就设定新对象的许多私有属性，而且该对象也继承了构建函数的原型链，及上面的共有属性。

3.this

this对象就是谁调用指向谁.

this在运行时才确定所指向的具体对象是谁。

1.当函数作为对象的方法调用时，this指向该对象。
2.当函数作为淡出函数调用时，this指向全局对象（严格模式时，为undefined）
3.构造函数中的this指向新创建的对象
4.嵌套函数中的this不会继承上层函数的this，如果需要，可以用一个变量保存上层函数的this。
再总结的简单点，如果在函数中使用了this，只有在该函数直接被某对象调用时，该this才指向该对象。

fn.call(o); //改变函数fn的作用域对象
fn.apply(o); //改变函数fn的作用域对象
fn.bind(o); //将函数fn的作用域绑定到对象o上

1.全局作用域下this（浏览器）：

console.log(this.document === document); //true
console.log(this === window); //truethis.a = 37;
console.log(window.a); //37

2.一般函数的this（浏览器）：

全局作用域下，this指向window，nodejs下是global；
严格模式下，this是undefined;

function f1(){return this;
}
f1() === window; //true，global objectfunction f2(){"use strict";return this;
}
f2() === undefined; //true

3.作为对象方法的函数this

this作为方法调用：作为对象方法调用指向该对象

函数作为一个对象的属性的值，也常常叫作一个对象的方法。

// 函数作为一个对象的属性的值，也常常叫作一个对象的方法。
var o = {prop:37，f:function(){return this.prop;}
};
//调用对象的方法，该方法就是一个函数
console.log(o.f()); // 37 this指向对象ovar o = {prop:37};
function independent(){return this.prop;
}
// 函数赋给对象的属性
o.f = independent;
console.log(o.f()); // 37

4.对象原型链上的this

对象原型链上的this，不管是原型链上的还是本身，都可以拿到.

var o = {f:function(){return this.a + this.b; }};
var p = Object.create(o);p.a = 1;
p.b = 4;console.log(p.f());  // 5

get／set方法与this:指向get set方法所在的对象里面

function modulus(){return Math.sqrt(this.re*this.re + this.im*this.im);
}var o = {re:1,im:-1,get phase(){return Math.atan2(this.im,this.re);}
}Object.defineProperty(o,'modulus',{get:modulus,enumerable:true,configurable:true
)};console.log(o.phase,o.modulus); // -0.78 1.4142

5.构造器中的this

构造器中的this，若没有return，this的指向会作为返回值.

function MyClass(){this.a =37;
}
var o = new MyClass();
console.log(o.a); //37function C2(){this.a = 37;return {a:38};
}
o = new C2();
console.log(o.a); // 38

6.call/apply方法与this

call/apply方法与this的应用场景及用法，call/apply可以传入一个对象作为函数作用域里的this.

function add(c,d){return this.a + this.b + c + d;
}
var o = {a: 1,b: 3};add.call(o, 5,7);//1+3+5+7 = 16add.apply(o, [10,20]);// 1+3+10+20 = 34function bar(){console.log(Object.prototype.toString.call(this));
}
bar.call(7);// "[object Number]"

7.bind方法与this

bind将一个对象绑定为某对象里的（此处为函数）this后，被绑定的对象可以以特定的this，实现重复使用。

如这里的g()函数

function f(){return this.a;
}
var g = f.bind({a:"test"});
console.log(g());//testvar o = {a:37,f:f,g:g};
console.log(o.f(),o.g());//37,test,使用bind绑定this

4.arguments

this始终指向的是调用者,当函数作为构造器时,this指向的新创建的空对象,然后就会执行构造器的所有代码,碰见this.XXX就是为新建对象添加属性.如果构造器最后没有显示的使用return返回一个值,那么就会返回this即新建对象.

函数属性和arguments：

arguments是一个类数组对象，原型不是Array.prototype，所以它没有join等数组对象才有的方法。

可以通过索引访问arguments对象。

function foo(x,y,z){ //形参arguments.length;// 2 实参个数arguments[0];//1// 绑定关系arguments[0] = 10;x;//10  // 未传参数，失去绑定关系arguments[2] = 100;z;//undefined  arguments.callee === foo;//true
}foo(1,2)
foo.length;// 3 形参个数
foo.name;// "foo" 函数名
arguments.length 实参个数

apply/call方法（浏览器）

function foo(x,y){console.log(x,y,this);
}foo.call(100,2,,3);// 2,3,Number(100)不是对象的会转变成对象
foo.apply(true,[3,4]);// 3,4,Boolean
foo.apply(null);//undefined,undefined,window
foo.apply(undefined);//undefined,undefined,window// 严格模式下
function foo(x,y){'use strict'; console.log(x,y,this);
}foo.apply(null);//undefined,undefined,null
foo.apply(undefined);//undefined,undefined,undefined

bind方法

this.x = 9;
var module = {x: 81,getX:function() {return this.x;}
}module.getX();//81对象.属性var getX = module.getX;getX();// 9 直接赋值给变量调用var boundGetX = getX.bind(module);改变函数运行是的this，绑定了modulebondGetX();// 81

bind与currying

function add(a,b,c){return a+b+c;
}var func = add.bind(undefined,100);
func(1,2); // 103// 100+200+10 =310
var func2 = func.bind(undefined,200);
func2(10); // 310

bind与new

function foo(){this.b = 100;return this.a;
}var func = foo.bind({a: 1});func();//1
new func();// {b:100}

bind方法模拟：

【慕课网】JavaScript中函数和this相关推荐

JavaScript中函数作为另一个函数的参数的时候它存在于哪个作用域
一直对函数作为参数被传递进另外一个函数理解的不是很清除.先看下这段代码吧: function test(fn){var bar = 1;fn(); } var bar = 99; test(funct ...
JavaScript id_好程序员web前端分享Javascript中函数作为对象
好程序员web前端分享Javascript中函数作为对象,Javascript赋予了函数非常多的特性,其中最重要的特性之一就是将函数作为第一型的对象.那就意味着在javascript中函数可以有属性, ...
JavaScript中函数的length属性
JavaScript中函数的length属性 length是函数的一个属性函数的length是js函数对象的一个属性,函数的length代表形参的个数(即有多少必传参数) 形参的数量不包括不包括剩余 ...
JavaScript中函数里的arguments属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
JavaScript中函数的三种定义方法
JavaScript中函数定义的三种方法. 函数的三种定义方法分别是:函数定义语句.函数直接量表达式和Function()构造函数的方法.下面依次介绍这几种方法具体怎么实现. 1. 函数定义语句 // ...
javascript中函数的全解简介
来源:itelite <script language="javascript"> //切记特殊的两种函数声明方式 /* //Function 构造 var f=ne ...
了解javascript中函数执行顺序
我个人觉得一般人不会有这种写法,但艺不压身,呵呵.希望能帮到初学的朋友!大家一起进步! 首先列举出8个例子,然后例子的解答会在文章末尾贴出! 测试代码一: <script language=&q ...
参数中_理解JavaScript中函数的参数
1,arguments JavaScript的函数的参数(arguments)在函数体的内部表现为一个类似数组的对象.就是它拥有数组的方法,却不是Array的实例. 例1 我们直接打印出argumen ...
慕课网视频中的代码---3-4 Minst手写体识别
慕课网视频地址:https://www.imooc.com/video/17905 import matplotlib.pyplot as plt import keras from keras.da ...
JavaScript中函数
函数什么是函数把一段相对独立的具有特定功能的代码块封装起来,形成一个独立实体,就是函数,起个名字(函数名),在后续开发中可以反复调用函数的作用就是封装一段代码,将来可以重复使用函数的定义函数 ...

【慕课网】JavaScript中函数和this

【慕课网】JavaScript中函数和this相关推荐

最新文章

热门文章