专栏首页Super 前端JavaScript函数及其prototype

JavaScript函数及其prototype

一、定义

函数可以通过声明定义,也可以是一个表达式。 (1)函数声明式: 分号是用来分隔可执行JavaScript语句,由于函数声明不是一个可执行语句,所以不以分号结束。

function a(){
  console.log('bbb');
}

(2)函数表达式: 函数表达式以分号结尾,因为它是一个执行语句。

var a = function(){
  console.log('aaa');
}

(3)声明式变体:

var a = function a(){
  console.log('bbb');
}

完全等价于 function b(){}

二、函数执行

JavaScript解析器将当前作用域内声明的所有变量和函数都会放到作用域的开始处,但是,只有变量的声明被提前到作用域的开始处了,而赋值操作被保留在原处。 示例1:

var a = function(){
  console.log('aaa');
}
function a(){
  console.log('bbb');
}
a();	//结果:aaa

示例2:

(function() {
  console.log(noSuchVariable);
})();
//报错,因为noSuchVariable变量根本没定义
</pre><pre name="code" class="javascript">(function() {
	console.log(declaredLater);		//"undefined"
	var declaredLater = "Now it's defined!";
	console.log(declaredLater);		//"Now it's defined!"
})();
//上面这段代码是正确的,没有任何问题。

示例3:

var a; 	        // 声明一个变量,标识符为a
function a() {} 	// 声明一个函数,标示符也为a
alert(typeof a);  	// function

function a() {}
var a;
alert(typeof a);  //function

function a() {}
var a = 1;
alert(typeof a);  //number

var a = 1;
function a() {}
alert(typeof a);  //number

总结:

  • 变量的声明被提前到作用域顶部,赋值保留在原地;
  • 声明式函数整个“被提前”;
  • 函数表达式只有变量“被提前”了,函数没有“被提前”;
  • 函数会首先被提升,然后才是变量,重复的var(变量)声明会被忽略掉;
  • 同名情况下,变量先“被提前”,函数再“再被提前”(即函数覆盖变量);
  • 赋值会根据前后顺序进行覆盖!

三、函数是对象[typeof instanceof]

在 JavaScript 中使用 typeof 操作符判断函数类型将返回"function"。但JavaScript函数描述为一个对象更加准确。JavaScript函数有属性和方法。 (1)typeof区分对象和其他原始值 JavaScript的数据类型分为:原始类型(数字、字符串、布尔值、null、undefined)和对象类型。 typeof[任何类型]返回值(boolean、string、number、object、undefined)和 function

typeof 2;     //'number'
typeof '2';   //'string'
typeof true;  //'boolean'
typeof [];    //'object'
typeof null;  //'object'
typeof undefined; //'undefined'
var a = function(){}; typeof a; //'function'

对于所有内置可执行对象,typeof一律返回“function”

typeof new Number(2);     //'object'
typeof new String('2');   //'object'
typeof new Boolean(true); //'object'

(2)instanceof[对象 instanceof 类]判断一个对象是否为类的实例

[] instanceof Object; //true
2 instanceof Number; //false
new Number(2) instanceof Number; //true

示例:

var a = function(){};
var b = function(){};
a.prototype = new b();
new a() instanceof b; //true
new a() instanceof Object; //true

首先确定b.prototype,如果b.prototype在a对象的原型链中,返回true,否则返回false。 注意;所有对象都是Object的实例。 (3)扩展 Object.prototype.toString.call([]) === '[object Array]';

四、prototype

JavaScript 对象有两种不同的属性,一种是对象自身的属性,另外一种是继承于原型链上的属性。 JavaScript中,类的所有实例对象都从同一个原型对象上继承属性,因此,原型对象是类的核心。 (1)只有函数有prototype,对象没有

var b = {};
b.prototype.bbb='bbb';  //报错b.prototype为undefined

function b(){}   
b.prototype.bbb='bbb';
console.log(b);            //结果:function b(){}
console.log(b.prototype);  //结果:b {bbb: "bbb"}
console.log(b.bbb);        //结果:undefined
console.log(new b().bbb);  //结果:bbb

(2)prototype是函数的内置属性(用于设置函数的原型),__proto__是对象的内置属性(用于设置对象的原型)。 PS:注意区分函数和对象

function test(){}
test.prototype;   		//结果:test {}
new test().prototype;   //结果:undefined,对象没有prototype
new test().__proto__;   //结果:test {}
   
function a(){
     this.v='vvv';
}
a.prototype; //a {}
new a.__proto__; //a {}
new a().__proto__ === a.prototype;  //true 实例对象的__proto__,指向函数的原型

(3)每个JavasScript函数都自动拥有一个prototype属性。这个属性的值是一个对象,这个对象包含唯一一个不可枚举属性constructor。constructor属性的值是一个函数对象。

function a(){
     this.v='vvv';
}
a.prototype.constructor === a; //true[物理地址一样]
a.prototype.constructor; //constructor属性指代这个类
a.prototype.constructor.__proto__ === a.__proto__ === Function.prototype; //true 
Object.prototype.constructor.__proto__ === Object.__proto__ === Function.prototype; //true

PS:所有构造器、函数的__proto__都指向Function.prototype,它是一个空函数(Empty function) (4)实例 示例1:

function a(){}
function b(){}
a.prototype = {aaa:'aaa'};
b.prototype = a.prototype;
var aa1 = new a();
var bb1 = new b();
//aa1.prototype.aaa='xxx';   //错误,对象没有原型
a.prototype.aaa = 'xxx';
console.log( aa1.aaa );    //xxx
console.log( bb1.aaa );    //xxx

补充:a===b; //false a.prototype === b.prototype; //true 实例2:

function a(){}
function b(){ this.bbb='bbb'}
a.prototype = new b();  //相当于a.prototype = {bbb: "bbb"};
console.log(new a().bbb ); //结果:bbb

补充:a.prototype === b.prototype; //false

五、实例方法&静态方法

(1)实例方法

function a(){}
a.prototype.count = 0;
var a1 = new a();
a1.count++;
var a2 = new a();
a2.count++;
a.prototype.count;  //0

PS:方法类似 a.prototype.method = function(){} (2)静态方法

function a(){}
a.count = 0;
new a().count();  //undefined,只能使用a.count调用

PS:方法类似 a.method = function(){} (3)当代码var p = new Person()执行时,new 做了如下几件事情: A. 创建一个空白对象 B. 创建一个指向Person.prototype的指针 C. 将这个对象通过this关键字传递到构造函数中并执行构造函数

六、闭包

函数定义时的作用域链到函数执行时依然有效。 示例-典型闭包:

var scope = "global scope";
function checkScope(){
  var scope = "local scope";
  function f(){
    return scope;
  }  
  return f();
}
checkScope(); //local scope

示例:更为常用的闭包

function counter(){
  var n=0;
  return{
    count:function(){
      return ++n;
    },
    reset:function(){
      n=0;
    }
  };
}
var c1 = new counter();
c1.count(); //1
var c2 = new counter();
c2.count(); //1
c1.reset(); //c1置为0,c2不受影响
c2.count(); //2

PS:实例对象互相不影响,单个实例对象内的方法,共享私有变量。

七、通过调用方法的形式来间接调用函数:apply&call

function a(){
  console.log(this.x+this.y);
}
a.call({x:100,y:100});  //200

function C(){
  this.m = function(){
    console.log(this.x+this.y); 
  }
}
var c = new C();
c.m.call({x:100,y:100});  //200

call&apply第一个实参是要调用函数的母对象,会变为this的值。 函数.call(对象,参数1,参数2); 函数.apply(对象,[参数1,参数2]); //数组形式 补充: function a(a,b,c,d){ //将伪数组转变为真数组 var args = [].slice.call(arguments); }

八、函数中this

function a(){
  console.log(this);  //a {} 
  function b(){
    console.log(this);  //window
  }
  b();
}
new a();

特别注意:函数内部函数this指向window 此问题在严格模式已被修改;在非严格模式中,可使用变量接收外部函数this供内部函数使用,如var that = this;

九、回调(函数当参数)

function a(callback){ callback(); } a(function(){ console.log('aaa'); }); 更加灵活,主页面只需为子页面提供对应接口,具体处理逻辑全部由子页面处理。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript作用域闭包(你不知道的JavaScript)

    JavaScript闭包,是JS开发工程师必须深入了解的知识。3月份自己曾撰写博客《JavaScript闭包》,博客中只是简单阐述了闭包的工作过程和列举了几个示...

    奋飛
  • JavaScript高级技巧

    以上代码要返回true,value必须是一个数组,而且还必须与Array构造函数在同个全局作用域中。(Array是window的属性)如果value是在另外一个...

    奋飛
  • JavaScript设计模式--单例模式

    保证一个类仅有一个实例,并提供一个访问它的全局访问点。 当单击登陆按钮,页面中出现一个登陆浮窗,这个登陆浮窗是唯一的,无论单击多少次登陆按钮,这个浮窗都只会被...

    奋飛
  • 函数声明与函数表达式

    函数声明:直接声明一个函数 function fnName() {};function声明必须有方法名,而出现在表达式里的方法名都会被忽略。

    meteoric
  • javascript模仿块级作用域

    模仿块级作用域 var somefunction=function(){ ///这里是块级作用域 } somefunction(); 在这里定义了一个函数,然后...

    wangxl
  • js之工厂构造函数模式

    本文为译文,初次翻译,如有误导,请多多包含,如阅读英文,可直接扫文末二维码阅读即可,若想读另外一篇可戳链接理解构造函数与原型对象

    itclanCoder
  • javascript基础详解-作用域

    JavaScript语言的作用域仅存在于函数范围中。这是必须要牢记的一点,还有一点重要的就是作用域的提升规则。

    用户2458785
  • webpack2 的 tree-shaking 好用吗?

    代码压缩的现状 下面是一个使用 react 的业务的代码依赖,但是实际上业务代码中并没有对依赖图中标识的模块,也就是说构建工具将不需要的代码打包到了最终的代码当...

    IMWeb前端团队
  • 在AngularJS应用中实现认证授权

    在AngularJS应用中实现认证授权 在每一个严肃的应用中,认证和授权都是非常重要的一个部分。单页应用也不例外。应用并不会将所有的数据和功能都 暴露给所有的用...

    庞小明
  • [十八]Cracking Digital VLSI Verification Interview

    亚稳态是一种电路状态,在电路正常工作所需的时间内,电路无法稳定在的“ 0”或“ 1”逻辑电平的状态。通常在建立时间和保持时间违例时发生。

    空白的贝塔

扫码关注云+社区

领取腾讯云代金券