浅谈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 相关文章推荐
jquery 实现input输入什么div图层显示什么
Jun 15 Javascript
node.js下when.js 的异步编程实践
Dec 03 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
JavaScript File API文件上传预览
Feb 02 Javascript
jQuery插件扩展测试实例
Jun 21 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 Javascript
JavaScript Ajax实现异步通信
Dec 14 Javascript
javascript 通过键名获取键盘的keyCode方法
Dec 31 Javascript
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 Javascript
ES6中字符串的使用方法扩展
Jun 04 Javascript
js canvas实现5张图片合成一张图片
Jul 15 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 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 新手入门
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
PHP 开源AJAX框架14种
2009/08/24 PHP
php页面防重复提交方法总结
2013/11/25 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
jquery弹出关闭遮罩层实例
2013/08/06 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
使用jQuery设置disabled属性与移除disabled属性
2014/08/21 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
node.js中的fs.chownSync方法使用说明
2014/12/16 Javascript
JavaScript模拟重力状态下抛物运动的方法
2015/03/03 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
javascript实现秒表计时器的制作方法
2017/02/16 Javascript
js 数字、字符串、布尔值的转换方法(必看)
2017/04/07 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
浅谈React高阶组件
2018/03/28 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
vue+axios 前端实现的常用拦截的代码示例
2018/08/23 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
python编写Logistic逻辑回归
2020/12/30 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
django框架模板语言使用方法详解
2019/07/18 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
道路施工安全责任书
2014/07/24 职场文书
入党积极分子个人总结
2015/03/02 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
python基础详解之if循环语句
2021/04/24 Python
golang 实现对Map进行键值自定义排序
2021/04/28 Golang