浅谈Javascript中的函数、this以及原型

更新时间：2016年10月09日 20:00:42 投稿：jingxian

下面小编就为大家带来一篇浅谈Javascript中的函数、this以及原型。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

关于函数

在Javascript中函数实际上就是一个对象，具有引用类型的特征，所以你可以将函数直接传递给变量，这个变量将表示指向函数“对象"的指针，例如：

function test(message){
     alert(message);
   }
   var f = test;
   f('hello world');

你也可以直接将函数申明赋值给变量：

var f = function(message){
     alert(message);   
   };
f('hello world');

在这种情况下，函数申明中可以省略函数名称，因为此时名称已经没有任何意义，我们可直接通过变量f来调用函数。

通过Function类型，我们可以更好地理解函数即对象：

var f = new Function("message","alert(message);");
f('hello world');

关于this

this可以看成调用函数的实际作用域上下文。比较以下函数的执行结果：

function test(){
     this.property = 'hello world';

   }
   test();
   alert(window.property);  //由于在全局范围内调用，test函数中的this实际指向全局对象(window)

   var obj = {};
   test.call(obj);   //通过call第一个参数指定执行上下文范围，所以test函数中this指向obj实例。
   alert(obj.property);   

   var obj2 = {};
   obj2.test2 = test;   //将obj2实例方法test指向 全局test方法
   obj2.test2();      //由于是在obj2上调用test方法，所以test函数中的this也指向了obj2实例
   alert(obj2.property);

定义类型

在Javascript中可以定义构造函数，构造函数与一般函数没有任何区别，在创建实例时，如果我们使用了new关键字，那么这个函数就具有构造函数的特性，否则就是一般函数，如下所示，我们定义了一个Person类型：

function Person(){
   this.name = 'xfrog';
   this.Say = function(){
     alert(this.name);
   };
}

当使用new关键字时，可以创建一个新的Person对象实例：

var p1 = new Person();
p1.Say();

如果不使用new关键字，将直接执行Person函数，由于执行上下文为全局范围，故name属性和Say方法将被添加到window对象：

Person();
Say();
window.Say();

原型

注意上述Person的定义方式，当使用new来创建Person实例时，将会执行Person构造函数，也就是会声明name属性和Say方法，这样可能产生效率问题，注意以下代码：

var p1 = new Person();
var p2 = new Person();
var test = p1.Say == p2.Say;

比较p1和p2两个Say函数指针，返回false，表示每个Person实例中的Say方法都是独立的，而事实上Say函数的功能是完全一样的，我们完全没有必要为每个对象重新分配Say函数”对象“，如果Person实例很多，将会造成大量的内存耗用。

如果将Say函数提取出来放入全局执行范围，似乎可解决次问题：

function Person(){
     this.name = 'xfrog';
     this.Say = say;   
   }

   function say(){
     alert(this.name);   
   }

   var p1 = new Person();
   var p2 = new Person();
   alert(p1.Say == p2.Say);
   p1.name = 'wang';
   p1.Say();

由于this始终和执行上下文相关，p1和p2实例中的Say方法中会正确地返回对应实例的name属性。但是，使用此方式有违面向对象的思想，也失去了类型密封的原则。还会造成大量的全局函数。

为了解决这些缺点，Javascript引出了原型的概念，简单理解，原型可以看成是类型的共享区，原型本身是一个对象，而对象中的属性对于类型来说是共享的。Javascript中每个类型通过prototype属性来表示原型，通过这个属性可指定共享方法：

function Person(){

   }
   Person.prototype.name = 'xfrog';
   Person.prototype.Say = function(){
     alert(this.name);
   };

   var p1 = new Person();
   var p2 = new Person();
   alert(p1.Say == p2.Say);   //返回true

为什么这里可以通过p1.Say来访问Say方法呢？这是因为ECMAScript标准规定了类型属性的查找顺序：先在类型的实例上查找，如果没有则继续在类型原型上查找，这一查找路径采用短路算法，即找到首个后即返回，考虑如下代码：

function Person(){
     this.name = 'wang';
   }

   Person.prototype.name = 'xfrog';
   Person.prototype.Say = function(){
     alert(this.name);
   }

   var p1 = new Person();
   p1.Say();   //将返回wang

上面提到prototype实际上是一个对象，那么我们是否可以直接访问呢？在一些浏览器实现（如Chrome、Fixfox等）的确可通过实例的__proto__属性来访问内部的prototype对象，这种特征表明Javascript引擎在每个对象的内部都是通过一个变量来保存对prototype的引用，这保证了prototype对应整个类型的实例来说是共享的，例如，你可在Chrome浏览器内使用如下方式来访问Say方法：

p1.__proto__["Say"]();

由于原型是一个对象，我们可以直接将一个对象赋值给prototype：

function Person(){

   }

   Person.prototype = {name:'xfrog', Say:function(){
     alert(this.name);
   }};

注意这个方式下，实际上是完全替换了Person的prototype，这与上面Person.prototype.name方式还是有细微差异的，这是因为任何类型，Javascript引擎都会添加默认的prototype，在这个prototype中包含一个对构造函数的引用，即原型对象属性constructor，所以通常使用替代prototype方式时，我们需要手动加上constructor属性：

Person.prototype = { 
     constructor: Person,
     name :'xfrog',
     Say:function(){
        alert(this.name);
     }
   }

注意，由于prototype对于整个类型是共享的，那么在prototype中的引用类型可能会存在问题，前面的Say函数作为一个对象，也是引用类型，所以每个实例中的Say都指向原型对象中的同一个函数，这本身没有问题，也是我们使用原型的初衷，但对于其他引用对象，可能结果并不是我们想要的：

function Person(){
   }

   Person.prototype = {
     name: 'xfrog',
     obj : { age: 18 },
     Say : function(){
        alert(this.obj.age);
     }
   };

   var p1 = new Person();
   var p2 = new Person();
   p1.obj.age = 20;
   p1.Say();
   p2.Say();

p2.Say返回的是20，这是因为obj属性作为原型属性是共享的，在内存中只存在一个实例，所以通过p1修改后，p2只能得到修改后的状态。如果要避免此情况，可将obj属性放到实例中：

function Person(){
     this.obj = { age: 18 };
   }

以上就是小编为大家带来的浅谈Javascript中的函数、this以及原型全部内容了，希望大家多多支持脚本之家~

您可能感兴趣的文章:

layer.open 按钮的点击事件关闭方法
今天小编就为大家分享一篇layer.open 按钮的点击事件关闭方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
这篇文章主要给大家介绍了利用Javascript判断鼠标进入容器方向的方法，以及window.open新窗口被拦截的问题分析，文中给出了详细图文介绍和示例代码，相信对大家的理解和学习具有一定的参考借鉴价值，下面来一起看看吧。
2016-12-12
js友好的时间返回函数
这篇文章主要为大家详细介绍了js友好的时间返回函数，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-08-08
el-select加上搜索查询时限制开头空格输入的解决方案
这篇文章主要介绍了el-select加上搜索查询时,限制开头空格输入的解决方案,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-02-02
JavaScript弹出对话框的三种方式
本文主要介绍了javascript中的三种弹出对话框，分别是alert()方法，confirm()方法，prompt()方法，对javascript弹出对话框相关知识感兴趣的朋友一起学习吧
2016-03-03
JavaScript中闭包的作用和应用场景
这篇文章将给大家详细介绍JavaScript 中闭包是什么,有哪些应用场景,文章通过代码示例介绍的非常详细,对大家的学习或工作有一定的参考价值,需要的朋友可以参考下
2023-09-09
Javascript 构造函数实例分析
一般构造函数没有返回值，他们通过关键字this初始化对象，没有返回值。当然一个构造器允许返回一个对象，如果这样的话返回的对象将变成new 表达式的值,在这种情况下值为this的对象将抛弃
2008-11-11
javascript监听鼠标滚轮事件浅析
这篇文章主要介绍了javascript监听鼠标滚轮事件浅析,使用具体例子说明,同时考虑了不同的浏览器,需要的朋友可以参考下
2014-06-06
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
这篇文章主要介绍了bootstrap fileinput组件整合Springmvc上传图片到本地磁盘的方法,需要的朋友可以参考下
2017-05-05
javascript中获取元素标签中间的内容的实现方法
下面小编就为大家带来一篇javascript中获取元素标签中间的内容的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10