首页 > 资讯 > 前端开发 > JavaScript >JavaScript函数及其prototype详解

960

分享到

JavaScript函数及其prototype详解

javascript prototype详解 Javascript prototype理解 js中prototype的作用 2023-03-14 08:03:53 960人浏览八月长安

摘要

目录一、定义二、函数执行三、函数是对象[typeof instanceof]四、prototype五、实例方法&静态方法六、闭包七、通过调用方法的形式来间接调用函数：appl

一、定义

函数可以通过声明定义，也可以是一个表达式。

（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');

});

更加灵活，主页面只需为子页面提供对应接口，具体处理逻辑全部由子页面处理。

到此这篇关于JavaScript函数及其prototype详解的文章就介绍到这了,更多相关JavaScript函数及其prototype内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: JavaScript函数及其prototype详解

本文链接: https://lsjlt.com/news/199649.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

京东一面：post为什么会发送两次请求？???

2024-01-12

鼠标划过时整行变色284607详解

2023-05-20

鼠标划过时整行变色284415处理办法

2023-05-20

TypeScript接口和类型的区别小结

2023-05-20

写给小白学习的地理信息的表示法GeoJSON

2023-05-20

vue使用Swiper踩坑解决避坑

2023-05-20

JavaScrip简单数据类型隐式转换的实现

2023-05-20

细说JS数组遍历的一些细节及实现

2023-05-20

初学者如何快速搭建Express开发系统步骤详解

2023-05-20

深入浅出JavaScript前端中的设计模式

2023-05-20

热门问答

回答

如何调试操作系统的错误？
操作系统

2023-11-15发布

回答

操作系统中的I/O系统是如何实现的？
操作系统

2023-11-15发布

回答

如何实现操作系统的内存管理？
操作系统

2023-11-15发布

回答

什么是虚拟内存，它对操作系统有什么影响？
操作系统

2023-11-15发布

回答

ASP中的MVC架构和WebForms架构有什么区别和使用场景？
ASP.NET

2023-11-15发布

回答

ASP中的数据验证和数据校验有什么不同？
ASP.NET

2023-11-15发布

回答

ASP中的ADO对象和DAO对象有什么区别和使用方法？
ASP.NET

2023-11-15发布

回答

Node.js中的包管理器NPM是什么？如何使用它进行依赖管理？
node.js

2023-11-15发布

回答

Vue.js中的动态组件是什么？如何使用它来动态渲染组件？
VUE

2023-11-15发布

回答

如何使用Vue.js实现懒加载和预加载？
VUE

2023-11-15发布