浅谈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 相关文章推荐
一个对于js this关键字的问题
Jan 09 Javascript
FormValidate 表单验证功能代码更新并提供下载
Aug 23 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
js本地图片预览实现代码
Oct 09 Javascript
常用Javascript函数与原型功能收藏(必看篇)
Oct 09 Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 Javascript
layui表格实现代码
May 20 Javascript
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 Javascript
微信小程序开发之自定义tabBar的实现
Sep 06 Javascript
DatePickerDialog 自定义样式及使用全解
Jul 09 Javascript
node后端服务保活的实现
Nov 10 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 Javascript
常用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
咖啡语言
2021/03/03 咖啡文化
php实现的单一入口应用程序实例分析
2015/09/23 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
Laravel 解决composer相关操作提示php相关异常的问题
2019/10/23 PHP
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
BootStrap的两种模态框方式
2017/05/10 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
浅析vue-router原理
2018/10/19 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
python list 合并连接字符串的方法
2013/03/09 Python
pyqt和pyside开发图形化界面
2014/01/22 Python
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
浅谈Python中的bs4基础
2018/10/21 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
BONIA波尼亚新加坡官网:皮革手袋,鞋类和配件
2016/08/25 全球购物
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
师范应届生语文教师求职信
2013/10/29 职场文书
日语专业个人的求职信
2013/12/03 职场文书
开办加工厂创业计划书
2014/01/03 职场文书
公司2014年度工作总结
2014/12/10 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
退休教师追悼词
2015/06/23 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js