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

关于函数

在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
, 函数
this
javascript 原型链、javascript 原型、javascript 原型继承、javascript 原型对象、javascript原型链继承,以便于您获取更多的相关知识。

时间: 2025-01-20 17:53:07

浅谈Javascript中的函数、this以及原型_javascript技巧的相关文章

浅谈JavaScript中数组的增删改查_javascript技巧

数组的增加 •ary.push()   向数组末尾添加元素,返回的是添加后新数组的长度,原有数组改变 •ary.unshift()  向数组开头添加元素,返回的是添加后新数组的长度,原有数组改变 • var ary=[1,2,3,4];   var res=ary.unshift(6);   console.log(res); ---->5   返回的是新数组的长度•ary.splice(n,m,x)从索引n开始删除m个元素,把新增的元素X放在索引n的前面,把删除的元素当成一个新数组返回,原有数

浅谈javascript中遇到的字符串对象处理_javascript技巧

在javascript中对参数处理: <script> function getParam() { urlInfo=window.location.href; //获取当前页面的url intLen=urlInfo.length; //获取url的长度 offset=urlInfo.indexOf("?"); //设置参数字符串开始的位置 strKeyValue=urlinfo.substr(offset,len); //取出参数字符串 这里会获得类似"id=1&

浅谈JavaScript 中有关时间对象的方法_javascript技巧

ECMAScript中的Date类型是在早期 Java 中的 Java.unile.Date 类基础上构建的.为此 Date 类型使用自 UTC (Coordinated Universal Time, 国际协调时间)1970年1月1日午夜开始经过的毫秒数来保存日期. 在这种数据存储格式下, Date 类型保存的日期能够精确到1970年1月1日之前或之后的285616年 •Date.parse(string) 接受一个表示日期的字符串参数,然后尝试根据这个字符串返回相应日期的毫秒数,不能转换则返

浅谈Javascript中substr和substring的区别_javascript技巧

 由于在项目中有需要对字符串进行截取,然后手残使用了IDE自动提示的substr,没想那么多以为substr和substring没多大区别. 然而并不是,且听我一一道来. 1. substr(index, length)   从起始索引号提取字符串中指定数目的字符.   substr方法可以传入两个参数 index和length.index是起始位,length是截取的长度.   当index是个非负整数时:     a. 如果不传入参数,则得到的还是字符串本身.         如: "abc

浅谈JS中String()与 .toString()的区别_javascript技巧

我们知道String()与 .toString()都是可以转换为字符串类型,但是String()与 .toString()的还是有区别的 1..toString()可以将所有的的数据都转换为字符串,但是要排除null 和 undefined 例如将false转为字符串类型 <script> var str = false.toString(); console.log(str, typeof str); </script> 返回的结果为 false,string 看看null 和

再谈Javascript中的基本类型和引用类型(推荐)_javascript技巧

一.基本类型和引用类型概述 js中数据类型的值包括:基本类型值和引用类型值 基本数据类型:undefined;null;boolean;number;string 引用类型值:保存在内存中,js不允许直接访问内存位置,因此时操作引用而不是实际对象 二.如何检测数据类型 1.基本数据类型的检测:使用typeof var s = "AAA"; alert(typeof s); //返回string 2.引用类型(对象类型)检测:使用instanceof alert(person insta

JavaScript中的函数模式详解_javascript技巧

JavaScript设计模式的作用是提高代码的重用性,可读性,使代码更容易的维护和扩展 在javascript中,函数是一类对象,这表示他可以作为参数传递给其他函数:此外,函数还可以提供作用域. 创建函数的语法 命名函数表达式 复制代码 代码如下: //命名函数表达式 var add = function add(a,b){     return a+b; }; 函数表达式 复制代码 代码如下: //又名匿名函数 var add = function(a,b){     return a+b;

javascript中普通函数的使用介绍_javascript技巧

复制代码 代码如下: <html> <head> <title>javascript中普通函数的使用</title> <script> function show(){ document.write("show函数被调用" + "<br/>"); return 10; } var hello = show();//show()函数被调用,将返回值赋值给hello变量.如果函数没有返回值,则返回u

JavaScript中eval()函数用法详解_javascript技巧

eval() 函数计算 JavaScript 字符串,并把它作为脚本代码来执行. 如果参数是一个表达式,eval() 函数将执行表达式.如果参数是Javascript语句,eval()将执行 Javascript 语句. 语法 复制代码 代码如下: eval(string) 参数 描述 string 必需.要计算的字符串,其中含有要计算的 JavaScript 表达式或要执行的语句. eval()函数用法详解: 此函数可能使用的频率并不是太高,但是在某些情况下具有很大的作用,下面就介绍一下eva