Js中的对象、构造函数、原型、原型链及继承

1、对象

在传统的面向过程的程序设计中,会造成函数或变量的冗余。而JS中对象的目的是将所有的具有相同属性或行为的代码整合到一起,形成一个集合,这样就会方便我们管理,例如:

var person1={
    name:"tan",
    age:26,
    showMessage:function(){
        alert("name:"+this.name);
    }
};
person.showMessage();//输出name:tan

以上的例子将name、age、showMessage放进person1这个对象中,方便了我们的管理同时也减少了我们的命名困难。

我们下面的讲解会用到的基本知识点:

1)、内存会对每一个对象一个内存空间;

2)、函数也是一个对象。

每一个对象都会占据一定的内存空间。

2、构造函数

以上可以看出对象的产生方便了我们的代码管理,但是又产生了一个问题,如果我又定义了一个对象person2,如下:

var person1={

name:"song",

age:16,

showMessage:function(){

alert("name:"+this.name);

}

};

这样就产生了代码的重复问题——person1与person2有同样的属性和行为,是不是能通过创造一个函数通过传参来改变对象的属性值,这样就引出了构造函数的概念。

function Person(name,age)={

this.name=name;

this.age=age;

this.showMessage=function(){

alert("name:"+this.name);

};

}

var person1=new Person(tan,26);

var person2=new Person(song,16);

这样通过构造函数我们就不用反复去重新定义属性和行为,我们就创造了两个对象person1和person2。person1和person2也叫作构造函数Person的两个实例。

3、原型

看上去构造函数可以完美的解决我们的代码管理和重复性的问题。但是,正如在1中提到的函数也是一个对象,也会有一定的内存空间,属性我们可以容忍每一个对象占据一个空间,但方法也就是行为,他对每一个对象来说动作是一样的,只是可能的参数不一样。因此我们要想一个方法来解决内存空间被过多的占用的问题。

拟解决方法1:函数的定义转移到构造函数外,例如:

function Person(name,age)={

this.name=name;

this.age=age;

this.showMessage=showMessage;

}

function showMessage(){

alert("name:"+name);

}

这时构造函数中this.showMessage会指向showMessage这个全局变量,先在构造函数的内部去找showMessage这个变量,然后去外部找(涉及到了作用域链的问题以后再说)。

这个解决方案看似很好,但一个对象若有多个方法时,代码的封装性无法体现,而且全局的函数只是为一个对象服务,则全局性体现的不明显。

拟解决方法2:原型

首先要知道,每一个函数在创建的时候都会默认的分配一个prototype属性,构造函数也不例外。那么 prototype属性是什么?

prototype是一个指针,它指向一个对象。指针就像是我想到存一本书在一间房子里(这是一个行为),我要完成这个行为,我先要建房子然后把书放进房子里,我下次要存一本新书,那么我还要先建房子在放另一本书,是不是听起来很麻烦,那么更好的解决方法呢?整个行为房子是一个确定的动作,不需要每次都重建,我建一次把房子的地址记下来,以后我每一次有放书这个动作时只需要通过地址找到对应的房子就行了。如上面的例子showMessage就是建房子的动作,name是书,protoype属性是地址。构造函数就是每放一本书就要建一个房子,而原型就是通过地址去寻找房子。

//建房子

function Person(){

}

//房子里有什么并确定了指针的指向

Person.prototype={

name:"tan",

age:"22",

showMessage:function(){

alert("name:"+this.name);

}

};

var person1 = new Person();

person1这样就有了指针,就能访问指针指向的内存空间。
我想你们应该有以下的疑问:

1)对象person1是否可以有自己的属性?

可以有,而且对于person1和原型Person中都有的属性,先考虑的是person1中的属性。

2)是否能通过person1改变原型属性值:

对不起,不可以,实例person1只是获取了一个指向原型的指针,他并没有改变原型的权利。但有一点要特别注意,对于包含引用类型的属性——列如数组。有一些操作是允许通过地址去访问内存的,列如push,这些操作就有可能改变原型属性,这个改变会造成灾难性的后果,因为所有引用这个原型的对象都会随之改变。
4、组合使用构造函数和原型来创造对象(自定义类型,也叫引用类型)

这是常用的自定义类型的创建方式,构造函数用来定义实例属性,而原型用于定义方法和共享属性。因此,每一个实例都会有自己的一份实例属性的副本,但同时又共享着对方法的引用,最大限度的节约了内存。例如:

function Person(name,age){

this.name=name;

this.age=age;

}

//房子里有什么并确定了指针的指向

Person.prototype={

construction:Person,

showMessage:function(){

alert("name:"+this.name);

}

};

var person1 = newPerson("tan",22);

prototype中的默认的construction属性,让原型指向构造函数,默认是Person。

5、原型链与继承

我们以上说的都是同类型下的对象,person1和person2都是Person的实例。假如我有Person和Man两个引用类型,Person中的属性和方法是有Man需要的,我想偷懒直接从

Person中所有的属性和方法拿过来,这就是继承。那么我作为一个继承的引用类型我能获得谁的属性和方法,那么在这个问题上就会有原型链的概念。当对象尝试获某个属性时,该对象没有,会尝试从原型对象中去找,原型对象没有,在从原型对象的原型去找,最后到达Object.prototype。

例如:

function Person(name,age){
this.pname=name;
this.page=age; 
}
Person.prototype={
showPMessage:function(){
alert("name:"+this.pname);
}
};
function Man(name,age){
        this.mname=name;
this.mage=age; 
}

//这一句话表示原型的指针指向了Person
Man.prototype = new Person("tan",22,"man");

//给原型添加方法一定要放在替换原型的语句之后
Man.prototype.test="wosi";
Man.prototype.showMMessage=function(){
alert("name:"+this.mname);
};

var song=new Man("song",1);
song.showMMessage();//显示song

song.showPMessage();//显示tan

出处:https://blog.csdn.net/tanzhengyu/article/details/50888657

原文地址:https://www.cnblogs.com/mq0036/p/12044265.html

时间: 2024-11-10 06:58:57

Js中的对象、构造函数、原型、原型链及继承的相关文章

js中的对象 函数 原型

// 关于 Function Object 和 proto prototype // 1.每一个对象实例都有一个 proto 属性,这个属性就是指向 对象构造函数的原型. let b = new Function(); console.log(b.__proto__ === Function.prototype); // true console.log(Function.prototype); // [Function] console.log(Function.prototype.proto

JS中有关对象的继承以及实例化、浅拷贝深拷贝的奥秘

一.属性的归属问题 JS对象中定义的属性和方法如果不是挂在原型链上的方法和属性(直接通过如类似x的方式进行定义)都只是在该对象上,对原型链上的没有影响.对于所有实例共用的方法可直接定义在原型链上这样实例化的的时候就不用对每个实例定义该属性方法,所有的实例均具有该方的引用见最后的输出. function Myclass(){ this.x=" x in Myclass"; this.get=function(){}//每次实例化对象,每个对象的该方法都是独立的,是不相同的 } Mycla

JS中的对象和方法简单剖析

众所周知,在js中对象就是精髓,不理解对象就是不理解js. 那么什么事js中的对象呢? 在js中,几乎一切皆对象: Boolean ,String,Number可以是对象(或者说原生数据被认作对象): Dates ,Maths,Regexps,Arrays,Funcitons,当然Objects,这些都是对象: JS中,所有值,除了原生值,都是对象:这些原生值包括:strings,numbers('3.14'),true,false,null和undefined 对象是包含变量的变量,js变量可

浅解析js中的对象

浅解析js中的对象 说到对象,我首先想到的是每逢过年过节,长辈们老是开玩笑的问我“你找了对象没?”.不说大家都知道,这里的“对象”指的是“女朋友”,但是今天我想要说的js中的“对象”和我们生活中谈到的“对象”不是同一回事,但是其中也有着很多相似之处.    在讲js中的对象之前,我想先抛出几个疑问:    什么是对象?    对象有哪些?    对象能做什么?    如何创建对象?    如何对对象进行操作?    对象有特性么?有的话有哪些特性?    对象有属性么?有的话有哪些?对属性如何操

JavaScript学习12 JS中定义对象的几种方式【转】

avaScript学习12 JS中定义对象的几种方式 转自:  http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工厂方式 3.构造函数方式 4.原型("prototype")方式 5.动态原型方式 一.基于已有对象扩充其属性和方法 <script type="text/javascript

JavaScript学习12 JS中定义对象的几种方式

JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工厂方式 3.构造函数方式 4.原型("prototype")方式 5.动态原型方式 一.基于已有对象扩充其属性和方法 <script type="text/javascript"> var object = new Object(); object.name

swfupload js中 file 对象的属性

name=3cc68cfc60b87e6dd6887d8a.jpg modificationdate=Wed   Apr 21 15:48:30 UTC+0800 2010 filestatus=-1 post=[object   Object] type=.jpg index=0 size=29006 creationdate=Wed Apr 21 15:48:38 UTC+0800   2010 id=SWFUpload_0_0swfupload js中 file 对象的属性,布布扣,bub

js实现小时钟,js中Date对象的使用?

介绍一下js中Date对象的使用 dateObj = new Date() dateObj = new Date(dateValue) dateObj = new Date(year,month,date[,hours[,minutes[,seconds[,ms]]]]); 以下有一个小样例 <script type="text/javascript"> function setTime(){ //获得如今的时间 var now = new Date(); var year

js中推断对象详细类型

大家可能知道js中推断对象类型能够用typeof来推断. 看以下的情况 <script> alert(typeof 1);//number alert(typeof "2");//string alert(typeof [1,2,3]);//object alert(typeof {"name":"zhuhui"})//object </script> 从上面中我们能够看出数组和普通对象用typeof推断出来都是objec

js中window对象详解以及页面跳转

js中window对象详解以及页面跳转 转自:http://www.makaidong.com/%E5%8D%9A%E5%AE%A2%E5%9B%AD%E6%90%9C/39219.shtml 1.window.top.window.location = "index.asp"; 2.window.top.location.href="index.asp" 3. window.top.location.replace("index.asp");