浅谈JS中的构造函数、原型对象(prototype)、实例中的属性/方法之间的关系

原文链接:https://segmentfault.com/a/1190000016951069

构造函数:函数中的一种,通过关键字new可以创建其实例。为了便于区分,通常首字母大写;
原型对象:一种特殊的对象,构造函数创建时自动生成;与构造函数形成一一对应,如同人和影子般的关系;
实例:通过构造函数实例出来的对象;



  在定义构造函数时,在其内部(“{“和”}”)进行定义属性和方法。当我们通过关键字new,对构造函数进行实例化的时候。实例会对构造函数的这些属性进行拷贝出一份副本,然后将其归属为当前实例。不同实例间的属性和方法是完全独立的,如下例子:

function Person(name,age){
    this.name = name;
    this.age = age;
    this.sayName = function(){
           alert(this.name);
    };
}

var HL = new Person("hailing",18);
var JJ = new Person("jiajia",20);

HL.sayName(); // hailing
JJ.sayName(); // jiajia

HL.name = "HAILING";

HL.sayName(); // HAILING
JJ.sayName(); // jiajia

  我们通过创建了new对Person进行实例化两个对象“HL”、“JJ”,当我们在修改“HL”的名字时,“JJ”的名字不会随之而改变。

  程序执行时,会自动生成一个原型对象(prototype)与之相关联。同时给该构造函数自动添加一个属性:prototype,该属性为指针,指向原型对象。同时,也给该原型对象添加一个属性:constructor,该属性也为指针,指向与其对应的构造函数。此时,原型对象中只会包含些默认的方法和属性。

  实例化完成后,所有实例均会与原型对象形成多对一的隐性关联关系。所有实例会共享原型对象的属性和方法,当然也包括constructor。当原型对象被添加一个属性或者方法后,均会被所有实例共享,即可以通过任意一个实例进行访问。如果原型对象的属性或方法与实例的属性或方法名称一致,则实例自身的属性或方法优先级高于原型对象上的:

//添加公共的属性和方法
Person.prototype.sex = "girl";
Person.prototype.saySex = function (){
   alert(this.sex);
};
alert(HL.saySex === JJ.saySex); // true
alert(HL.saySex === Person.prototype.saySex); // true

Person.prototype.stature = 165;
alert(HL.stature); // 165
alert(JJ.stature); // 165

//为实例对象修改或者添加私有属性。
HL.stature = 160;
alert(HL.stature); // 160
alert(JJ.stature); // 165

//删除实例对象的私有属性。
delete HL.stature;
Person.prototype.stature = 170;
alert(HL.stature); // 170
alert(JJ.stature); // 170

  例子中,给原型对象增加了sex属性和saySex方法,此时通过实例对象“HL”和“JJ”访问并且进行比较,同时也和原型对象自身的saySex进行比较,结果为ture;而后又给原型对象增加了stature属性,此时“HL”和“JJ”中均无此属性,故访问了原型对象中的stature属性。当我们单独给“HL”增加了stature属性后,“HL”不在访问原型对象,而是访问“HL”自身的该属性。当我们通过关键字“delete”删除“HL”自身的属性后,再次访问时,又回重新访问原型对象上的属性。



总结: 构造函数中的属性和方法仅为声明和定义,一旦实例化工作完成后。实例对象自身的属性和方法与构造函数将不在存在关联关系。原型对象与实例对象形成“备胎”关系,当通过对象访问属性或方法时,程序会优先搜索对象本身的属性或方法,不存在才会访问原型对象的方法或者属性。

  因此,当多个实例需要使用同一个属性或方法时,我们应该将该方法放于原型对象上,从而避免相同属性或方法多次独立存在于多个对象导致内存浪费。

原文地址:https://www.cnblogs.com/wangjing-web/p/11917041.html

时间: 2024-10-14 21:31:45

浅谈JS中的构造函数、原型对象(prototype)、实例中的属性/方法之间的关系的相关文章

面向对象中构造函数,原型对象和实例的关系图

总结 以下代码为例 function Person(){} Person.prototype.c=function(){} var p1=new Person(); var p2=new Person(); 1.构造函数有一个prototype属性,(任何函数都有这个属性)这个属性表示原型对象 Person.prototype 2.构造函数的原型对象有个consturctor属性,指向构造函数本身 Person.prototype.constructor===Person 3.构造函数的原型对象

[js高手之路]原型对象(prototype)与原型链相关属性与方法详解

一,instanceof: instanceof检测左侧的__proto__原型链上,是否存在右侧的prototype原型. 我在之前的两篇文章 [js高手之路]构造函数的基本特性与优缺点 [js高手之路]一步步图解javascript的原型(prototype)对象,原型链 已经分享过了. function CreateObj(uName) {             this.userName = uName;             this.showUserName = function

JS中的内置对象简介与简单的属性方法

JS中的数组: 1.数组的概念: 数组是在内存中连续存储的多个有序元素的结构,元素的顺序称为下标,通过下标查找对应元素 2.数组的声明: ①通过字面量声明var arr1 = [,,,,] JS中同一数组可以储存多种不同的数据类型(但,同一数组一般只用于存放同种数据类型) 例如var arr1 = [1,"2",true,{"name":"啦啦啦"},[1,2]]; ②通过new关键字声明:var arr2 = new Array(参数); &g

浅谈js中的this关键字

浅谈js中的this关键字 全局作用域中的this 函数作用域中的this 不同函数调用方法下的this 直接调用 作为对象的方法调用 作为构造函数调用 通过call或apply方法调用 嵌套函数作用域中的this 浅谈js中的this关键字 this是JavaScript中的关键字之一,在编写程序的时候经常会用到,正确的理解和使用关键字this尤为重要.接下来,笔者就从作用域的角度粗谈下自己对this关键字的理解,希望能给到大家一些启示,权当交流之用. 全局作用域中的this 本文将以作用域由

37.浅谈js原型的理解

浅谈Js原型的理解 一.js中的原型毫无疑问一个难点,学习如果不深入很容易就晕了!    在参考了多方面的资料后,发现解释都太过专业,对于很多还没有接触过面向对象    语言的小白来说,有理解不了里面的专有名词!如果你没学过c++或者Java之类的更接触底层的语言,那就不要太深究,理解会用自然可以了,当接触到更多语言时慢慢的会理解越来越深刻! 下面我就举例分享一下prototype的概念!知道对于初学者知道这些就足够了! 分析一下,上面这个例子!我们可以知道 People的类型是一个对象!按照j

js高级构造函数,实例对象和原型对象——prototype、__proto__和constructor构造器

一.前言 了解JavaScript面向对象,需要先了解三个名词: 构造函数,实例对象和原型对象. 注意:JavaScript中没有类(class)的概念,取而代之的是构造函数,两者类似却又有很大的差别. 先上代码,最常用的: function Person(name, age) { this.name = name; this.age = age; this.eat= function() { alert('吃西红柿') } } var person1 = new Person('小米', 28

浅谈 js 对象 toJSON 方法

前些天在<浅谈 JSON.stringify 方法>说了他的正确使用姿势,今天来说下 toJSON 方法吧.其实我觉得这货跟 toString 一个道理,他是给 stringify 方法字符串化的时候调用的.看下 MDN 官方文档吧<toJSON behavior>.非常简单,但是要注意的是他和 stringify 方法第二个参数稍微有点不同.因为 stringify 第二个参数是回调函数时,只是对当前 key 对应的值进行修改.而 toJSON 则是对当前对象进行修改.例如: v

JS面向对象篇二、什么是原型?原型对象与实例对象、构造函数的关系及相关方法

本文内容: 1.构造函数.原型对象与实例对象之间的关系: 2.isPrototypeOf()和Object.getPrototypeOf(); 3.实例对象上与原型对象上同名的属性处理: 4.hasOwnProperty()方法和in操作符判断属性来自实例对象本身还是它的原型对象: 5.for-in.Object.keys()和Object.getOwnPropertyNames()方法获取实例对象或者原型对象上的属性: 6.需注意的特殊问题 构造函数.原型对象与实例对象 function Pe

浅谈JS之AJAX

0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HTTP和web服务器进行数据交换(用户不知道也感觉不出来,就跟桌面应用程序似的进行数据交互),它不会导致页面重新加载,这样才有更好的用户体验. Ajax是基于以下开放标准: javascript(DOM) css html xml(json) 通俗的说就是使用了javascript(DOM)的XMLH