您现在的位置是:首页 > 文章详情

JavaScript 中 扩展方法、原型概念(Prototype)

会飞的猪2018-12-17142人围观
简介白码驿站是一个面向开发者的知识共享社区,专注于为开发者打造一个纯净的技术交流社区(源码下载,免费在线图片压缩,jquery插件,插件下载,JS/CSS在线压缩。)-白码驿站

原型

        在JavaScript 每一个对象都有构造函数,而在JavaScript 中每一个函数都有一个属性,叫prototype(原型)JavaScript 构造函数创建的每一个对象都是来源于原型的派生对象。

举个例子:有一个person对象, 对象有name属性,和say()方法,

                                        
var Person = function(n) {
	this.name = name;
	
	this.say = function() {
		alert("你好,我是" + this.name);
	};
};
var p = new Person("白码驿站");
                                

运行的结果是: “你好,我是白码驿站”,接下来我们在去new一个对象

                                        
var p1 = new Person("白码驿站");
                                

        在这里我们需要思考一下, p与p1中的say()方法是同一个方法吗? 答案是不同的 , 这里我需要说一下,在C#中, 如果创建多个对象,对象中的方法是指向同一个方法的, 这里牵扯到一个方法表的概念,这里就不一一介绍了。有兴趣的可以自己去了解一下。

        在上面的代码中, 对象只是存储在一个变量中,即, 每次创建一个对象, 都会象值类型一样进行复制一份;

JavaScript 中  扩展方法、原型、原型链的概念(Prototype)

        怎么证明在JavaScript中不是同一个方法呢, 我们还是举个例子, 例如:我们创建一个person对象 , 对其进行复制, 在创建一个对象, 不进行赋值, 调用同一个方法, 显然第二个会报错, 代码如下:

                                        
//创建一个person对象, 并进行赋值
var Person2 = function(n) {
	this.name = n;
};

var p2 = new Person2("白码驿站");

p2.say = function() {
	alert(this.name);
};

p2.say();  //这里会调用say()方法, 结果返回“白码驿站”


//这里在创建一个对象
var p3 = new Person2("www.51baidu.com.cn")

p3.say();   // 这里调用会报错,  因为p3对象并没有say()方法;
                                

        我们在来思考一个问题, 如何让JavaScript中的对象都指向同一个say()方法呢, 这里就需要用到 prototype(原型)了,上面已经讲过了,( 在JavaScript 中每一个函数都有一个属性,叫prototype(原型),JavaScript 构造函数创建的每一个对象都是来源于原型的派生对象。)所以我们利用这点, 稍微改下上面的代码就可以实现引用同一个say()方法了;

                                        
//创建一个say()方法
var myBase = {
    say:function() {
        alert("我是" + this.name);
    }
};

var Person = function(n) {
	this.name = n;
};
//将say()方法复制给person对象的原型,
Person.prototype = myBase;

//然后我们分别创建对象,
var p = new Person("白码驿站");
p.say();  //返回 “我是白码驿站” 

var p1 = new Person("www.51baidu.com.cn" 
p1.say();   //返回 “我是www.51baidu.com.cn”
                                


扩展方法

        当我们可以给一个方法的 原型(prototype)赋值时,我们可以进一步拓展, C#中不是有扩展方法吗, 我们用原型也是可以实现的,举个例子:例如我们给String对象增加一个扩展方法

                                        
//给String对象增加一个 加域名的方法
String.prototype.AddUrl = function() {
	// this表示字符串本身
	return this + "htts://www.51baidu.com.cn";
};

var str = "白码驿站";
alert(str.AddUrl());  //返回:白码驿站htts://www.51baidu.com.cn
                                



文章评论

Top

目录

昵称:会飞的猪

职业:.net程序员

邮箱:753109098@qq.com

分类标签

本栏推荐

  • JavaScript 正则表达式(匹配,提取,替换)

    正则表达式作为一种匹配处理字符串的利器在很多语言中都得到了广泛实现和应用,JavaScript作为一门常用于web开发的语言,必然要具备正则这种强大的特性,但是C#中正则表达式与Jav...

  • JavaScript 继承的介绍及封装

    几乎每个开发人员都有面向对象语言(比如C#、Java)的开发经验。在面向对象的语言中,有两个非常重要的概念 - 类和实例。 类定义了一类事物公共的行为和方法;而实例则是类的一个具体实现...

  • JavaScript 中 扩展方法、原型概念(Prototype)

    原型 在JavaScript 每一个对象都有构造函数,而在JavaScript 中每一个函数都有一个属性,叫prototype(原型),JavaScript 构造函数创建的每一个对象都是...

  • C# 使用SqlTransaction进行事务处理

    事务处理基本原理 事务是将一系列操作作为一个单元执行,要么同时成功,要么同时失败,回滚到最初状态。在事务处理术语中,事务要么提交,要么中止。若要提交事务,所有参与者都必须保证对数据的...

  • JavaScript 之动态函数 - Function

    在 javaScript中,经常会使用到函数,普通函数虽然很方便,但是,形式略显复杂,特别是代码量大的时候,这时,我们可以使用动态函数,动态函数形式比较简洁,并且比普通函数表达式更灵活...