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


Posted in Javascript onOctober 09, 2016

关于函数

在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以及原型全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
在你的网页中嵌入外部网页的方法
Apr 02 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
Jan 25 Javascript
文本框水印提示效果的简单实现代码
Feb 22 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
jQuery实现锚点scoll效果实例分析
Mar 10 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
Jun 05 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
JavaScript门面模式详解
Oct 19 Javascript
让mocha支持ES6模块的方法实现
Jan 14 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 Javascript
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
常用Javascript函数与原型功能收藏(必看篇)
Oct 09 #Javascript
javascript汉字拼音互转的简单实例
Oct 09 #Javascript
Javascript农历与公历相互转换的简单实例
Oct 09 #Javascript
Angularjs 创建可复用组件实例代码
Oct 09 #Javascript
Boostrap实现的登录界面实例代码
Oct 09 #Javascript
深入理解bootstrap框架之第二章整体架构
Oct 09 #Javascript
javascript 判断是否是微信浏览器的方法
Oct 09 #Javascript
You might like
PHP新手上路(十二)
2006/10/09 PHP
zend framework文件上传功能实例代码
2013/12/25 PHP
PHP屏蔽过滤指定关键字的方法
2014/11/03 PHP
php异步多线程swoole用法实例
2014/11/14 PHP
php显示指定目录下子目录的方法
2015/03/20 PHP
js控制div及网页相关属性的代码
2009/12/19 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
基于Jquery代码实现手风琴菜单
2015/11/19 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
vue.js中ref和$refs的使用及示例讲解
2019/08/14 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
Python使用Socket(Https)Post登录百度的实现代码
2012/05/18 Python
在Python中marshal对象序列化的相关知识
2015/07/01 Python
python不换行之end=与逗号的意思及用途
2017/11/21 Python
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
python变量赋值方法(可变与不可变)
2019/01/12 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
python 实现单例模式的5种方法
2020/09/23 Python
关于Python错误重试方法总结
2021/01/03 Python
python解包概念及实例
2021/02/17 Python
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
八一建军节感言
2014/02/28 职场文书
机电专业毕业生求职信
2014/07/01 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
大学生个人学习总结
2015/02/15 职场文书
退休教师追悼词
2015/06/23 职场文书
2016年教师节贺卡寄语
2015/12/04 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android