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

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

会飞的猪 2018-12-17 301人已围观

简介白码驿站是一个面向开发者的知识共享社区,专注于为开发者打造一个纯净的技术交流社区(源码下载,免费在线图片压缩,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
                                



Tags: JavaScript/Jquery

很赞哦! (6)

文章评论

系统处理中...