《JavaScript》——面向对象之原型

上一篇文章我主要介绍的是在JavaScript里对象的创建,可是,在对象的创建过程中有很多知识我们还没有学习,那就是原型,原型式什么东东哪?在这里我想用自己的理解跟大家说说,有不对的地方大家可以给我提意见。

首先说,原型就是对象,这个对象中的属性和方法可以被共享,被谁共享哪?就是被实例们共享(当我们创建一个对象后,然后再用这个对象去实例化许多实例)。

我们创建的每个对象都有一个 prototype(原型)属性,这个属性是系统自动创建的,通过这个属性(prototype)就可以直接访问到该对象的原型对象。例子如下所示。

function Box() {}                    //声明一个构造函数
Box.prototype.name = '美女';         //在原型里添加属性
Box.prototype.age = 20;
Box.prototype.run = function () {    //在原型里添加方法
return this.name + this.age + '看我这...';
};

其中Box.prototype代表访问到了Box()对象的原型,Box.prototype.age=20,表示给Box()的原型对象的age属性赋值为20。现在,声明两个Box()对象的实例看看。

var box1 = new Box();
var box2 = new Box();
alert(box1.run == box2.run);         //返回true,说明它俩的run引用地址是一样的。

从上面的图中可以看出,实例box1和box2,都能通过构造函数对象Box去访问Box prototype,而Box prototype中放的一些方法和属性就是被box1和box2所共享的。

prototype 下有两个方法:apply()和 call(),每个函数都包含这两个非继承而来的方法。 这两个方法的用途都在特定的作用域中调用函数, 实际上等于设置函数体内 this 对象的值。 我的理解是一个是传参数用的对象冒充,一个是改变函数的作用域。对象冒充我的理解是指A对象冒充B对象后,A对象就会拥有B对象的属性或者方法,但是B对象引用类型的属性和方法不能被冒充。其实call()和apply()方法的作用是一样的,这里我只介绍一下call()方法。

1、原型的call()方法(改变函数的作用域)

<span style="color:#000000;">var color = '红色的';                       //或者 window.color = '红色的';也行
var box = {
color : '蓝色的'
};
function sayColor() {
alert(this.color);
}
sayColor();                                //作用域在 window   返回红色的。
sayColor.call(this);                       //作用域在 window返回红色的。
sayColor.call(window);                     //作用域在 window 返回红色的。
sayColor.call(box);                        //作用域在box对象内 返回蓝色的。</span>

2、原型的call()方法(对象冒充)

function Box(name,age){
	this.name=name;
	this.age=age;
	run=function(){
		return this.name+this.age+"看我这.....";
	}
}

function Desk(name1,age1){
	Box.call(this,name1,age1);    //对象冒充调用,在这里也是传递参数的作用。
}

var  a =new Desk('刘亦菲',15);
alert(a.name);                        //返回刘亦菲
alert(a.age);                         //返回15
alert(a.run());                       //无返回值,因为这是引用类型,不能使用对象冒充调用,如果想调用,需要将new Box()赋值给Desk的原型代码如下

//Desk.prototype=new Box()            //此方法是将对象Box()的实例和原型的信息全部赋值给Desk对象。

另外, 原型模式是有执行流程:1、先查找构造函数实例里的属性或方法,如果有,立刻返回;2、如果构造函数实例里没有,则去它的原型对象里找,如果有,就返回。这里就不在匹配例子了。

小结

使用传递参数的构造函数创建实例,可以使不同的实例初始化不同的值,原型在对象的继承中也起到了很大的作用,如果想知道原型在对象的继承起到的作用,请看我的下一篇博客,《JavaScript》——面向对象之继承。

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-05 23:54:15

《JavaScript》——面向对象之原型的相关文章

第一百零九节,JavaScript面向对象与原型

JavaScript面向对象与原型 学习要点: 1.学习条件 2.创建对象 3.原型 4.继承 ECMAScript有两种开发模式:1.函数式(过程化),2.面向对象(OOP).面向对象的语言有一个标志,那就是类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是,ECMAScript没有类的概念,因此它的对象也与基于类的语言中的对象有所不同.   一.学习条件 在JavaScript视频课程第一节课,就已经声明过,JavaScript课程需要大量的基础.这里,我们再详细探讨一下: 1

JavaScript 面向对象 (prototype 原型模式)

一. JavaScript 设计思想 1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.这是历史上第一个比较成熟的网络浏览器,轰动一时.但是,这个版本的浏览器只能用来浏览,不具备与访问者互动的能力.比如,如果网页上有一栏"用户名"要求填写,浏览器就无法判断访问者是否真的填写了,只有让服务器端判断.如果没有填写,服务器端就返回错误,要求用户重新填写,这太浪费时间和服务器资源了. 因此,网景公司急需一种网页脚本语言,使得浏览器可以与网页互动.工程师_Brend

JavaScript面向对象与原型(一):构造函数

提到构造函数,我们并不陌生,在面向对象领域,构造函数已经是一个老生常谈的问题了.在JavaScript中再次学习,真的是有一种亲切的感觉. 一.简单回顾 构造函数 ,是一种特殊的方法 .主要用来在创建对象时初始化对象, 即为对象成员变量赋初始值,总与new运算符一起使用在创建对象的语句中.特别的一个类可以有多个构造函数,可根据其参数个数的不同或参数类型的不同来区分它们即构造函数的重载. C#构造函数(一个简单的小例子): <span style="font-size:14px;"

有关javaScript面向对象和原型笔记

javaScript是一种比較特殊的语言,ECMAScript中没有类的概念.跟其它面向对象的语言有一定的差别.它的对象也与基于类的语言中的对象有所不同,严格来说,javascript对象是一组没有特定顺序的值,对象的每一个属性或方法都有一个名字.而每一个名字都映射到一个值.每一个对象都是基于一个引用类型的创建的. 创建自己定义对象的最简单的方式就是创建一个Object的实例.然后再为其加入属性和方法,如: var box = new Object(); //创建对象 box.name1 = '

javascript面向对象和原型

/* //工厂模式 function createObject(name,age){ var obj = new Object();//新建一个对象 obj.name=name;//新建对象的属性 obj.age=age; obj.run=function(){//新建对象的方法 return this.name+","+this.age+"...running."; } return obj;//返回新建的对象引用 } var box1 = createObjec

JavaScript面向对象与原型

工厂模式:无法识别对象 function createObject(name, age) { //集中实例化的函数 var obj = new Object(); obj.name = name; obj.age = age; obj.run = function () { return this.name + this.age + '运行中...'; }; return obj;}var box1 = createObject('Lee', 100); //第一个实例var box2 = cr

JavaScript 面向对象与原型

ECMAScript有两种开发模式:1.函数式(过程化);2.面向对象(OOP); 一 创建对象1.普通的创建对象 ? 1 2 3 4 5 6 7 8 9 // 创建一个对象,然后给这个对象新的属性和方法;   var box = new Object();       // 创建一个Object对象;   box.name = 'lee';          // 创建一个name属性并赋值;   box.age = 100;   box.run = function(){        //

JavaScript面向对象和原型函数

对象,是javascript中非常重要的一个梗,是否能透彻的理解它直接关系到你对整个javascript体系的基础理解,说白了,javascript就是一群对象在搅..(哔!). 常用的几种对象创建模式 使用new关键字创建 最基础的对象创建方式,无非就是和其他多数语言一样说的一样:没对象,你new一个呀! var gf = new Object(); gf.name = "tangwei"; gf.bar = "c++"; gf.sayWhat = functio

快速理解JavaScript面向对象编程—原型继承

总的来说js语言就是门面向对象编程的语言,对象这个概念几乎贯穿了整个js的学习. 对象 创建对象两种方法:(若要生成对象实例必须调用构造函数) 1.var obj = {name:"jer" , age:12};(在js内部调用了预设的Object()构造函数) 访问:alert(obj.name);//"jer" alert(obj["name"]);//"jer" 2.var obj = new Object(); obj

javascript面向对象和原型————呱呱二号

面向对象 1.工厂模式 function createObject(name,age){ let obj = new Object(); this.name = name; this.age = age; return obj; } let objA = createObject('Tom',24); let objB = createObject('Jane',23); typeof ObjA; //Object typeof ObjB; //Object ObjA instanceof Ob