JS核心系列:原型对象

在JS中,每当创建一个函数对象f1 时,该对象中都会内置一些属性,其中包括prototype和proto, prototype即原型对象。

每一个构造函数都有一个与之相关联的对象,该对象称之为原型对象。
每个实例对象都能共享其原型对象上的属性和方法。
原型对象的作用主要用来实现属性的继承,让实例对象能共享原型对象的属性,减少内存分配。
所以,在上一节中,我们想在每个Person对象中共享同一个say方法,可以这样来实现。
function Person(name, age) {
this.name = name;
this.age = age;
}//在原型对象上添加say函数,实例对象共享该函数
Person.prototype.say = function(){
console.log("say hello");
};var p = new Person("zs", 10, say);
p.say();var p2 = new Person("zs", 10, say);
p2.say();
在原型对象上添加成员的方法:
? 构造函数.prototype.成员名 = 成员值;
为Person原型对象添加say方法后,实现了在多个实例对象上共享该方法的功能。
获取原型对象的方法:
? 构造函数.prototype
? 实例对象. proto
在每个实例对象上都有一个 proto 的属性,也是用来获取该对象的原型对象。
Person.prototype == p. proto ;//true
下图详细说明了各对象之间的关系:


面向对象中的核心概念
构造函数:Person,和new关键字一起创建对象
构造函数的原型对象:Person.prototype,
原型对象:和创建实例对象的构造函数相互关联的对象
实例对象:由构造器创建出来的对象称之为实例对象
实例化:由构造器创建实例对象的过程称之为实例化
对象的成员:属性+方法
实例成员:实例对象上的属性和方法,name,age,只能当前实例对象才能访问
原型成员:原型对象上的属性和方法,say(),使用该原型对象对应构造器创建出来的所有实例对象都能访问
静态成员:直接添加在构造函数上的属性和方法,只能使用构造函数才能访问
proto 属性介绍
该属性是在ES6之后才纳入规范,在这之前,只有部分浏览器实现。
该属性可以获取指定实例对象的原型对象,p. proto ,和Person.prototype获取的一样
我们也可以使用Object构造器上的getPrototypeOf(实例对象)方法获取指定实例对象的原型对象
以上提到的三种获取原型对象的方法所得到的结果是一样的。即:
Object.getPrototypeOf(p) == Person.prototype == p. proto
扩展内置对象
内置对象是JS中事先定义好的对象,可以直接拿来使用的对象,在这类对象中已经封装好了一堆的方法和属性,方便开发者完成基本的功能。
但是在实际开发中,这些属性或者方法不一定能够满足我们的需求,此时就需要对这些内置对象做功能扩展。
需求:为数组对象添加一个获取元素个数的方法
var arr1 = [1, 2, 3];var arr2 = ["A", "B", "C","D"];
arr1.getLength = function () {
return this.length;
}console.log(arr1.getLength());
上面为数组arr1添加了一个getLength()方法获取其元素个数,那么此时的arr2对象上有这个方法吗?相信大家心里都有答案。如果想要arr2拥有同样的功能,也需要同样的操作。
所以这种方式不可取,如果100个数组都想都需要这样的功能,操作起来就比较复杂了。
根据前面学过的知识点,我们完全可以使用原型来解决这个问题。
var arr1 = [1, 2, 3];var arr2 = ["A", "B", "C","D"];Array.prototype.getLength = function () {
return this.length;
}console.log(arr1.getLength());// 3console.log(arr2.getLength());// 4
我们直接在Array的原型对象上添加getLength()方法,之后创建的所有的数组对象都拥有了该方法,搞定!
这种方式能够解决我们的问题,但是还是存在问题的:

  1. 在多人开发的环境中,如果使用这种方式对内置对象做扩展,可能会对其他开发人员造成影响
  2. 如果在原型对象上添加了过多的成员,会降低对象成员的搜索效率。
    安全的扩展内置对象
    上面扩展内置对象的方法存在一定的问题,问题的关键其实在于我们是直接在内置对象的原型上进行拓展的,这样导致对其他使用该对象的开发人员造成影响。
    所以,我们的解决思路就是,自定义一个对象,让该对象继承需要扩展的内置对象,然后只需要对自定的对象进行操作即可。
    function MyArray() {
    }//让MyArray的原型指向Array对象//即继承Array中的所有成员
    MyArray.prototype= new Array();
    MyArray.prototype.getLength=function () {
    return this.length;
    }var arr1 = new MyArray();
    arr1.push("A","B","C","D","E");//内置对象的初始方法console.log(arr1.getLength());//扩展之后的方法
    接下来,如果想要对数组做扩展,我们只需要操作MyArray即可,而不需要直接操作Array,如此,就不会对其他使用Array的开发人员操作影响了。看图理解:

    原型链的结构图
    每个实例对象都是由构造函数创建出来的
    每一个构造函数都有默认关联的原型对象
    原型对象本身也是对象,所以它也有自己的构造函数
    原型对象的构造函数也有默认关联的原型对象
    以上就构成了一种链式访问结构,称之为原型链
    下面画出了Person对象和Array对象的原型链:


如果你仔细的读完本文,相信你对 JavaScript 中的原型,原型链会有新的认识。如果还想了解更多JS相关干货,记得持续关注我的更新!

原文地址:https://blog.51cto.com/13007966/2459857

时间: 2024-10-13 08:32:06

JS核心系列:原型对象的相关文章

浅谈JS中的原型对象和原型链

我们知道原型是一个对象,其他对象可以用它实现属性继承,除了prototype,又有__proto__ 1. prototype和__proto__的区别 prototype是函数才有的属性                                     __proto__是每个对象都有的属性 但是__proto__不是一个规范的属性,只是部分浏览器 实现了此属性,对应标准的属性是[[Prototype]] 2. __proto__属性指向谁? __proto__的指向取决于对象创建时的实

理解js的prototype原型对象

我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法.如果按照字面意思来理解,那么prototype就是通过调用构造函数而创建的那个对象实例的原型对象.使用原受对象的好处是可以让所有对象实例共享它所包含的属性和方法.换句话说,不必在构造函数中定义对象实例的信息,而是可以将这些信息直接添加到原型对象中,如下面的例子所示. function Person(){} Person.prototype.n

JS中的原型对象与构造器

在Javascript中:原型对象是属于构造函数的,不属于实例:实例只能共享原型对象中的属性和方法(当然也可以有自己的属性和方法,或者覆盖原型中同名的属性和方法):构造器constructor属于原型的,不属于实例:实例之所以能有constructor属性是因为它共享了原型对象的所有成员,包括原型对象的constructor属性: function Wede(){this.name="zhao"} //输出构造函数的原型对象console.log(Wede.prototype); //

JS构造函数、原型对象、隐含参数this

This 解析器再调用函数每次都会向函数内部传递一个隐含的参数this,this指向的是一个对象(函数执行的上下文对象) 1.以函数形式调用时,this永远是window. 2.以方法形式调用时,this就是调用方法的那个对象 3.当以构造函数的形式调用时,this就是新创建的那个对象 使用工厂的方法创建对象 通过该方法可以大批量的创建对象,这样创建的对象使用的构造函数都是Object,无法区分多种不同类型的对象. function create(name,age,geder){ var obj

JS面向对象系列教程 — 对象的基本操作

面向对象概述 ? 面向对象(Object Oriented)简称OO,它是一种编程思维,用于指导我们如何应对各种复杂的开发场景. 这里说的对象(Object),意思就是事物,在面向对象的思维中,它将一切都看作是对象,并以对象为切入点去思考问题. 使用面向对象的思维去开发程序,我们首先思考的是这个系统中有哪些对象(事物),它们各自有什么属性(特征),又有什么方法(行为),这样一来,就可以把系统分解为一个一个的对象,然后对每个对象进行单独研究,以降低系统的整体复杂度. 学习面向对象,我们不仅要学习它

谈谈JS中的原型

不知道大家对JS中的原型理解的怎么样,我想如果大家对JS中的原型对象以及prototype属性十分熟悉的话对后面原型链以及继承的理解会十分的容易,这里想和大家分享自己对其的理解,请先看下面这段代码O(∩_∩)O~~ 1 function Person(){ 2 } 3 Person.prototype.name = "jingzi"; 4 Person.prototype.age = 20; 5 Person.prototype.sayName = function(){ 6 aler

1--面试总结-js深入理解,对象,原型链,构造函数,执行上下文堆栈,执行上下文,变量对象,活动对象,作用域链,闭包,This

参考一手资料:http://dmitrysoshnikov.com/ecmascript/javascript-the-core/中文翻译版本:https://zhuanlan.zhihu.com/p/32042645 Javascript 是一种单线程编程语言,这意味着它只有一个调用栈,call Stack(调用栈 ,,先入后出) 核心:对象,原型链,构造函数,执行上下文堆栈,执行上下文,变量对象,活动对象,作用域链,闭包,This js原型链? 定义 原型对象也是简单的对象并且可以拥有它们自

js原型对象与Java类的区别

在我学习Javascript的原型对象时,我总是不自觉地拿Java的类思想来做比较,时间久了,我渐渐认识到二者有巨大的不同. 首先,类是不能直接当方法来运行,它最简便的方式是调用其静态方法:而原型对象本身就是一个方法体,它可以直接运行.二者在构造对象的过程中,js可以扮演两种角色,一个可以将原型对象当方法来使用,才接触js时,都是以这种形式来使用,即万物皆方法体,像c;另一个是模仿面向对象的特性,为原型对象定义属性,运用构造器时,将构造器构造的对象的指针指通过原型链指向原型对象的属性,从而实现面

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

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