浅谈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 相关文章推荐
在视频前插入广告
Nov 20 Javascript
Jquery 常用方法经典总结
Jan 28 Javascript
Js中获取frames中的元素示例代码
Jul 30 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
Sep 01 Javascript
JavaScript实现在标题栏上显示当前日期的方法
Mar 19 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
vue中是怎样监听数组变化的
Oct 24 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
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
php之可变函数的实例详解
2017/09/13 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
JavaScript声明变量时为什么要加var关键字
2014/09/29 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
JS实现访问DOM对象指定节点的方法示例
2018/04/04 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
Python类的动态修改的实例方法
2017/03/24 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
python ChainMap的使用和说明详解
2019/06/11 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
CSS3的颜色渐变效果的示例代码
2017/09/29 HTML / CSS
.NET初级开发工程师面试题(包括Javascript)
2012/08/22 面试题
翻译专业应届生求职信
2013/11/23 职场文书
医学实习生自我鉴定
2013/12/12 职场文书
走群众路线剖析材料
2014/10/09 职场文书
门市房租房协议书
2014/12/04 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
导游词之张家界
2019/10/31 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
Python实现滑雪小游戏
2021/09/25 Python
什么是SOLID
2022/03/24 Javascript
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏
python playwrigh框架入门安装使用
2022/07/23 Python