【JavaScript】面向对象与原型

ECMAScript有两种开发模式:

1、函数式(过程化)

2、面向对象(OOP)

但是ECMAScript没有类的概念,因此与基于类的语言的对象也有所不同。

一、创建对象

var box=new Object();

box.name=‘lee‘;                          //属性

box.run=function(){                  //方法

returnthis.name+‘运行中。。。‘;

}

alert(box.run());

关于工厂模式方法

因为对象是引用类型值,所以,每次更新这个对象,对象的源值都会改变,要想多整出几个对象,就要再写一个新的对象,从而产生2个不同的对象引用值,但是这样每次创建一个新的对象,要写很多代码,所以用到工厂模式方法。

代码:

function createObject(name,age){

var obj=new Object();

obj.name=name;

obj.age=age;

obj.run=function(){

returnthis.name+this.age+‘运行中。。‘;

};

return obj;

}

var box1=createObject(‘lee‘,100);

var box2=createObject(‘kee‘,200);

alert(box1.run());

alert(box2.run());

工厂模式解决了重复实例化的问题。

关于构造函数

因为工厂模式解决了重复实例化的问题,但是还有一个问题就是识别问题,因为根本无法搞清楚他们到底是那个对象的实例,所以就采用构造函数方法来创建特定对象。

代码:

function Box(name,age){

this.name=name;

this.age=age;

this.run=function(){

return this.name+this.age+‘运行中‘;

}

}

var box1=newBox(‘lee‘,100);        
//new Box()即可

var box2=newBox(‘kee‘, 200);

alert(box1.run());

alert( box1  instantof Box);   //很清晰的识别他从属于Box.

采用构造方法就解决了上面两个问题,第一,重复实例化,第二,对象识别的问题,但是这里了并没有new Object(),为什么可以实例化Box()?

采用构造方法,和使用工厂模式的方法不同之处:

1、构造函数方法没有显示的创建对象(new Object());

2、直接将属性和方法赋值给this对象。

3、
没有return语句。

构造函数方法有一些规范:

1、函数名和实例化构造名相同且大写(PS:非强制,但这么写有助于区分构造函数和普通函数)。

2、通过构造函数创建对象,必须使用new运算符。

上面说了,在构造函数方法里面没有new Object(),没有创建对象,那么它在什么地方创建了一个新的对象?

1、使用了构造函数,并且new
构造函数(),那么后台就执行了new Object();

2、将构造函数的作用域给新对象,(即new Object()创建出来的对象),而函数体内的this就代表newObject()出来的对象。

3、返回新对象(后台直接返回)

对象冒充调用:

为了改变作用域,就用到了对象冒出调用。

var 0=new Object();

Box.call(o,‘jack‘,200)

alert(0.run());

这样对象0就可以调用box的方法了。

二、原型

我们创建的每一个函数都有一个prototype()属性,这个属性是一个对象,用途是包含可以由特定类型的所有实例共享的属性和方法。

原型的创建:

方法一:

functionBox(){}          //声明一个构造函数

Box.prototype.name=‘lee‘;

Box.prototype.age=100;

Box.prototype.run=function(){

return.this.name+this.age+‘运行中。。‘;

}

方法二:

function Box(){};

Box.prototype={

name:‘lee‘,

age:100,

run:function(){

return this.name+this.age+‘运行中。。‘;

}

};

进一步了解构造函数的声明方式和原型模式的声明方式,下面是图示;

判断一个对象是否指向了该构造函数的原型对象,可以使用isPrototypeOf()方法来测试。

alert(Box.prototype.isPrototypeOf(box));

原型模式的执行流程:

1、先查找构造函数实例里的属性或方法,如果有,立即返回。

2、如果构造函数实例里没有,就去它的原型对象里找,如果有,就返回。

对象实例仅可以访问原型中的值,不可更改。

判断属性是在构造函数还是在原型里?

alert(box.hasOwnProperty(‘name‘)); //在实例里返回true.

原型对象不仅可以在自定义对象的情况下使用,而ECMAScipt内置的引用类型都可以使用这种方式,并且内置的引用类型本身也使用了原型。

因为原型模式的最大优点:共享,也是它的最大的缺点,所以,当我们要保持数据的特性,而不能共享时,我们就用到下面:

组合构造函数+原型模式:

function Box(name,age){        //不共享的使用构造函数

this.name=name;

this.age=age;

this.family=[‘father‘];

};

Box.prototype={
                 //共享时使用原型模式

constructor:Box,

run:function(){

returnthis.name+this.age+this.family;

}

};

为了封装性更好,我们把构造函数和原型封装在一起,叫做:

动态原型模式:

functionBox(name,age){    //将所有的写成封装到函数体内

this.name=name;

this.age=age;

if(typeofthis.run!=‘function‘){      //仅在第一次调用的初始化

Box.prototype.run=function(){

return this.name+this.age+‘运行中。。。‘;

};

}

}

Varbox=new Box(‘lee‘,100);

Alert(box.run());

三、继承

继承是面向对象中的一个比较核心的概念。其他正统面向对象语言都会用两种方式实现继承,一个是接口实现,一个是继承,而ECMAScript只支持继承,不支持接口实现,而实现继承的方式依靠原型链完成。

在JavaScript里,被继承的函数称为超类型(父类,基类),继承的函数称为子类型(子类,派生类)。继承也有之前的问题,比如字面量重写原型会中断关系,使用引用类型的原型,子类还无法给超类型传递参数。

借用构造函数:

目的:

为了解决引用共享和超类型无法传参的问题。

组合继承:

目的:

在上面的基础上,做到复用。

原型链+借用构造函数

组合继承是JavaScript最常用的继承模式,但有些小问题,就是超类型在使用过程中会被调用2次,一次是创建子类型的时候,另一次是在子类型构造函数的内部。

寄生组合继承:

解决了组合继承的2次调用的问题:

最后再来一张图镇楼~~

时间: 2024-10-03 15:01:29

【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