首页 / JAVASCRIPT / 详解Javascript中prototype属性

详解Javascript中prototype属性

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了详解Javascript中prototype属性，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9066字，纯文字阅读大概需要13分钟。

内容图文

详解Javascript中prototype属性(推荐)

在典型的面向对象的语言中，如java，都存在类（class）的概念，类就是对象的模板，对象就是类的实例。但是在Javascript语言体系中，是不存在类（Class）的概念的，javascript中不是基于‘类的'，而是通过构造函数（constructor）和原型链（prototype chains）实现的。但是在ES6中提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让原型对象的写法更加清晰、更像面向对象编程的语法而已。

　　按照我的习惯，在写文章前我会给出文章目录。

　　以下内容会分为如下小节：

　　1.构造函数的简单介绍

　　2.构造函数的缺点

　　3.prototype属性的作用

　　4.原型链（prototype chain）

　　5.constructor属性

　　　　5.1：constructor属性的作用

　　6.instanceof运算符

1.构造函数的简单介绍

　　在我的一篇Javascript 中构造函数与new命令的密切关系文章中，详细了介绍了构造函数的概念和特点，new命令的原理和用法等，如果对于构造函数不熟悉的同学，可以前往细细品味。以下做一个简单的回顾。

　　所谓构造函数，就是提供了一个生成对象的模板并描述对象的基本结构的函数。一个构造函数，可以生成多个对象，每个对象都有相同的结构。总的来说，构造函数就是对象的模板，对象就是构造函数的实例。

　　构造函数的特点有：

　　　　a：构造函数的函数名首字母必须大写。

　　　　b：内部使用this对象，来指向将要生成的对象实例。

　　　　c：使用new操作符来调用构造函数，并返回对象实例。

　　看一个最简单的一个例子。

function Person(){

?this.name =?'keith';

}

?var boy =?new Person();

console.log(boy.name);?//'keith'

2.构造函数的缺点

　　所有的实例对象都可以继承构造函数中的属性和方法。但是，同一个对象实例之间，无法共享属性。

function Person(name,height){

?this.name=name;

?this.height=height;

?this.hobby=function(){

?return 'watching movies';

}

?}

var boy=new Person('keith',180);

?var girl=new Person('rascal',153);

?console.log(boy.name);?//'keith'

?console.log(girl.name);?//'rascal'

?console.log(boy.hobby===girl.hobby);?//false

　上面代码中，一个构造函数Person生成了两个对象实例boy和girl，并且有两个属性和一个方法。但是，它们的hobby方法是不一样的。也就是说，每当你使用new来调用构造函数放回一个对象实例的时候，都会创建一个hobby方法。这既没有必要，又浪费资源，因为所有hobby方法都是童颜的行为，完全可以被两个对象实例共享。

　　所以，构造函数的缺点就是：同一个构造函数的对象实例之间无法共享属性或方法。

3.prototype属性的作用

　　为了解决构造函数的对象实例之间无法共享属性的缺点，js提供了prototype属性。

　　js中每个数据类型都是对象（除了null和undefined），而每个对象都继承自另外一个对象，后者称为“原型”（prototype）对象，只有null除外，它没有自己的原型对象。

　　原型对象上的所有属性和方法，都会被对象实例所共享。

　　通过构造函数生成对象实例时，会将对象实例的原型指向构造函数的prototype属性。每一个构造函数都有一个prototype属性，这个属性就是对象实例的原型对象。

function Person(name,height){

this.name=name;

this.height=height;

}

Person.prototype.hobby=function(){

return 'watching movies';

}

var boy=new Person('keith',180);

var girl=new Person('rascal',153);

console.log(boy.name);?//'keith'

console.log(girl.name);?//'rascal'

console.log(boy.hobby===girl.hobby);?//true

　　上面代码中，如果将hobby方法放在原型对象上，那么两个实例对象都共享着同一个方法。我希望大家都能理解的是，对于构造函数来说，prototype是作为构造函数的属性；对于对象实例来说，prototype是对象实例的原型对象。所以prototype即是属性，又是对象。

　　原型对象的属性不是对象实例的属性。对象实例的属性是继承自构造函数定义的属性，因为构造函数内部有一个this关键字来指向将要生成的对象实例。对象实例的属性，其实就是构造函数内部定义的属性。只要修改原型对象上的属性和方法，变动就会立刻体现在所有对象实例上。

　　上面代码中，当修改了原型对象的hobby方法之后，两个对象实例都发生了变化。这是因为对象实例其实是没有hobby方法，都是读取原型对象的hobby方法。也就是说，当某个对象实例没有该属性和方法时，就会到原型对象上去查找。如果实例对象自身有某个属性或方法，就不会去原型对象上查找。

boy.hobby=function(){

?return 'play basketball';

?}

?console.log(boy.hobby());?//'play basketball'

?console.log(girl.hobby());?//'swimming'

　　上面代码中，boy对象实例的hobby方法修改时，就不会在继承原型对象上的hobby方法了。不过girl仍然会继承原型对象的方法。

　　总结一下：

　　a：原型对象的作用，就是定义所有对象实例所共享的属性和方法。

　　b：prototype，对于构造函数来说，它是一个属性；对于对象实例来说，它是一个原型对象。

4.原型链（prototype chains）

　　对象的属性和方法，有可能是定义在自身，也有可能是定义在它的原型对象。由于原型对象本身对于对象实例来说也是对象，它也有自己的原型，所以形成了一条原型链（prototype chain）。比如，a对象是b对象的原型，b对象是c对象的原型，以此类推。所有一切的对象的原型顶端，都是Object.prototype，即Object构造函数的prototype属性指向的那个对象。

　　当然，Object.prototype对象也有自己的原型对象，那就是没有任何属性和方法的null对象，而null对象没有自己的原型。

1 console.log(Object.getPrototypeOf(Object.prototype)); //null

2 console.log(Person.prototype.isPrototypeOf(boy)) //true

　　原型链（prototype chain）的特点有：

　　　　a：读取对象的某个属性时，JavaScript引擎先寻找对象本身的属性，如果找不到，就到它的原型去找，如果还是找不到，就到原型的原型去找。如果直到最顶层的Object.prototype还是找不到，则返回undefined。

　　　　b：如果对象自身和它的原型，都定义了一个同名属性，那么优先读取对象自身的属性，这叫做“覆盖”（overiding）。

　　　　c：一级级向上在原型链寻找某个属性，对性能是有影响的。所寻找的属性在越上层的原型对象，对性能的影响越大。如果寻找某个不存在的属性，将会遍历整个原型链。

　　看概念可能比较晦涩，我们来看一个例子。但是理解了概念真的很重要。

　　上面代码中，定了一个数组arr，数组里面有三个元素。我们并没有给数组添加任何属性和方法，可是却在调用length，join()，valueOf()时，却不会报错。

　　length属性是继承自Array.prototype的，属于原型对象上的一个属性。join方法也是继承自Array.prototype的，属于原型对象上的一个方法。这两个方法是所有数组所共享的。当实例对象上没有这个length属性时，就会去原型对象查找。

　　valueOf方法是继承自Object.prototype的。首先，arr数组是没有valueOf方法的，所以就到原型对象Array.prototype查找。然后，发现Array.prototype对象上没有valueOf方法。最后，再到它的原型对象Object.prototype查找。

　　来看看Array.prototype对象和Object.prototype对象分别有什么属性和方法。

console.log(Object.getOwnPropertyNames(Array.prototype))

//["length", "toSource", "toString", "toLocaleString", "join", "reverse", "sort", "push", "pop", "shift", "unshift", "splice", "concat", "slice", "lastIndexOf", "indexOf", "forEach", "map", "filter", "reduce", "reduceRight", "some", "every", "find", "findIndex", "copyWithin", "fill", "entries", "keys", "values", "includes", "constructor", "$set", "$remove"]

?console.log(Object.getOwnPropertyNames(Object.prototype))

?// ["toSource", "toString", "toLocaleString", "valueOf", "watch", "unwatch", "hasOwnProperty", "isPrototypeOf", "propertyIsEnumerable", "__defineGetter__", "__defineSetter__", "__lookupGetter__", "__lookupSetter__", "__proto__", "constructor"]

　　我相信，大家看到这里，对prototype还是似懂非懂的。这很正常，毕竟是js中比较重要又比较抽象的概念,不可能那么快就掌握，再啃多几篇，说不定掌握其精髓。在某乎上，有一个活生生的实例，可能也是大家会遇到的问题。可以看看 js构造函数和原型对象。

5.constructor属性

　　prototype对象有一个constructor属性，默认指向prototype对象所在的构造函数。

　　要注意的是，prototype是构造函数的属性，而constructor则是构造函数的prototype属性所指向的那个对象，也就是原型对象的属性。注意不要混淆。

　　由于constructor属性是定义在原型（prototype）对象上面，意味着可以被所有实例对象继承。

function A(){};

?var a=new A();

?console.log(a.constructor);?//A()

console.log(a.constructor===A.prototype.constructor);//true

　　上面代码中，a是构造函数A的实例对象，但是a自身没有contructor属性，该属性其实是读取原型链上面的

A.prototype.constructor属性。

　　5.1：constructor属性的作用

　　　a：分辨原型对象到底属于哪个构造函数

function A(){};

var a=new A();

console.log(a.constructor===A)?//true

console.log(a.constructor===Array)?//false

　　　　上面代码表示，使用constructor属性，确定实例对象a的构造函数是A，而不是Array。

　　　　b：从实例新建另一个实例

function A() {};

?var a =?new A();

var b =?new a.constructor();

console.log(b?instanceof A);?//true

　　　　上面代码中，a是构造函数A的实例对象，可以从a.constructor间接调用构造函数。

　　　　c：调用自身的构造函数成为可能

A.prototype.hello =?function() {

return new this.constructor();

}

　　　　d：提供了一种从构造函数继承另外一种构造函数的模式

function Father() {}

?function Son() {

Son.height.constructor.call(this);

?}

?Son.height =?new Father();

　　　　上面代码中，Father和Son都是构造函数，在Son内部的this上调用Father，就会形成Son继承Father的效果。

　　　　e：由于constructor属性是一种原型对象和构造函数的关系，所以在修改原型对象的时候，一定要注意constructor的指向问题。

　　　　解决方法有两种，要么将constructor属性指向原来的构造函数，要么只在原型对象上添加属性和方法，避免instanceof失真。

6.instanceof运算符

　　instanceof运算符返回一个布尔值，表示指定对象是否为某个构造函数的实例。

　　因为instanceof对整个原型链上的对象都有效，所以同一个实例对象，可能会对多个构造函数都返回true。

　注意，instanceof对象只能用于复杂数据类型（数组，对象等），不能用于简单数据类型（布尔值，数字，字符串等）。

　　此外，null和undefined都不是对象，所以instanceof 总是返回false。

　　利用instanceof运算符，还可以巧妙地解决，调用构造函数时，忘了加new命令的问题。

　　上面代码中，使用了instanceof运算符来判断函数体内的this关键字是否指向构造函数Keith的实例，如果不是，就表明忘记加new命令，此时构造函数会返回一个对象实例，避免出现意想不到的结果。

内容总结

以上是互联网集市为您收集整理的详解Javascript中prototype属性全部内容，希望文章能够帮你解决详解Javascript中prototype属性所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/830261.html

来源：【匿名】

【上一篇】java变量和javascript变量之间的传递【下一篇】javascript 怎么调用php方法

更多 ►

【详解Javascript中prototype属性】教程文章相关的互联网学习教程文章

理解javascript中的prototype【图】

以前一直对javascript中的prototype不是很理解，今天在阅读了《javascript高级程序设计之后》终于理解了其中的prototype。来简单的总结一下从书中学习到的内容。我们都知道在创建了一个function之后，这个function就具有了prototype这样的一个属性，利用这个prototype我们可以做很多的事情，其中我们经常用到的一点就是利用它来当做构造函数，因此，本文重要从function作为构造函数的角度来说明一下prototype。其实j...

从mixin到new和prototype：Javascript原型机制详解

这是一篇markdown格式的文章，更好的阅读体验请访问我的github，移动端请访问我的博客继承是为了实现方法的复用，如何实现方法的复用呢？最容易想到的，就是：```js//mixinfunction extend(optional, base){ for(var prop in base){ if(!prop in optional){ optional[prop] = base[prop] } } return optional}```这种方法俗称`mixin`，它直接从甲对象复制方法和属性和方法到乙对象，乙对象就拥有...

Effective JavaScript Item 30 理解prototype, getPrototypeOf和proto的不同【图】

本系列作为Effective JavaScript的读书笔记。 prototype，getPropertyOf和__proto__是三个用来访问prototype的方法。它们的命名方式很类似因此很容易带来困惑。它们的使用方式如下： prototype:一般用来为一个类型建立它的原型继承对象。比如C.prototype = xxx，这样就会让使用newC()得到的对象的原型对象为xxx。当然使用obj.prototype也能够得到obj的原型对象。 getPropertyOf:Object.getPropertyOf(obj)是ES5中用来得到obj对象的...

图解Javascript原型(prototype)链【代码】【图】

本文尝试阐述Js中原型（prototype）、原型链（prototype chain）等概念及其作用机制。上一篇文章（图解Javascript上下文与作用域）介绍了Js中变量作用域的相关概念，实际上关注的一个核心问题是：“在执行当前这行代码时Js解释器可以获取哪些变量”，而原型与原型链实际上还是关于这一问题。我们知道，在Js中一切皆为对象（Object），但是Js中并没有类（class）；Js是基于原型（prototype-based）来实现的面向对象（OOP）的编程范式...

javascript对象的属性,方法,prototype作用范围分析【代码】

读了篇博客感觉很有用"javascript对象的属性,方法,prototype作用范围分析"就自己写了一遍.以后自己可以用的到. 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3<head> 4<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> 5<title>javascript对象的属性,方法,pro...

JS中的prototype(转载)【图】

本文转载自博客园。作者：叶剑锋出处：http://www.cnblogs.com/yjf512/archive/2011/06/03/2071914.html 本文基于下面几个知识点:1 原型法设计模式在.Net中可以使用clone()来实现原型法原型法的主要思想是，现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展。我们称B的原型为A。 2 javascript的方法可以分为三类：a 类方法b 对象方法c 原型方法例子：function People(name){ this.name=name; //对象方法 thi...

JavaScript强化教程——Prototype【代码】

本文为 H5EDU 机构官方 HTML5培训教程，主要介绍：JavaScript强化教程 —— Prototype 引用 Prototype 如需测试 JavaScript 库，您需要在网页中引用它。为了引用某个库，请使用 <script> 标签，其 src 属性设置为库的 URL：引用 Prototype <!DOCTYPE html> <html> <head> <script src="http://apps.bdimg.com/libs/pro ... gt%3B </script> </head> <body> </body> </html>Prototype 描述 Prototype 提供的函数可使 HTML DOM 编...

前端修炼-javascript关键字之prototype【代码】

通常来说，javascript中的对象就是一个指向prototype的指针和一个自身的属性列表。只有构造器（Object,Function,Array,Date,String）才具有且会有一个prototype属性。原型链继承就是创建一个新的指针，指向构造器的prototype属性。　prototype属性列表会默认有一个constructor(构造函数)属性，这个属性是一个指向prototype属性所在指针，也就是当前对象自己。 1function baseClass()2{3this.showMsg = function()4 {5 a...

理解JavaScript的prototype和proto

首先，要明确几个点：1.在JS里，万物皆对象。方法（Function）是对象，方法的原型(Function.prototype)是对象。因此，它们都会具有对象共有的特点。即：对象具有属性__proto__，可称为隐式原型，一个对象的隐式原型指向构造该对象的构造函数的原型，这也保证了实例能够访问在构造函数原型中定义的属性和方法。2.方法(Function)方法这个特殊的对象，除了和其他对象一样有上述_proto_属性之外，还有自己特有的属性——原型属性（prot...

[前端JS学习笔记]JavaScript prototype 对象【图】

一、概念介绍prototype 对象：　　　　　　　　　　　原型对象。在JavaScript中, 每一个对象都继承了另一个对象,后者称为"原型对象". 只有 null 除外,它没有自己的原型对象。　　　　　　　　　　原型对象上的所有属性和方法,都能被派生对象所共享。通过构造函数实例的实例对象,都会被自动分配一个原型对象。每一个　　　　　　　　　　　构造函数的prototype属性,就是这个实例对象的原型对象。二、原型使用如上图,在Animal的源...

JavaScript:Object.prototype.toString方法的原理【代码】

在JavaScript中,想要判断某个对象值属于哪种内置类型,最靠谱的做法就是通过Object.prototype.toString方法.var arr = []; console.log(Object.prototype.toString.call(arr)) //"[object Array]"本文要讲的就是,toString方法是如何做到这一点的,原理是什么.ECMAScript 3在ES3中,Object.prototype.toString方法的规范如下:15.2.4.2 Object.prototype.toString()在toString方法被调用时,会执行下面的操作步骤:1. 获取this对象的[[Cl...

JS中的prototype【代码】

JS中的phototype是JS中比较难理解的一个部分本文基于下面几个知识点: 1 原型法设计模式在.Net中可以使用clone()来实现原型法原型法的主要思想是，现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展。我们称B的原型为A。 2 javascript的方法可以分为三类：a 类方法b 对象方法c 原型方法例子：function People(name) {this.name=name;//对象方法this.Introduce=function(){alert("My name is "+this.name);} } //...

javascript中 Array.prototype.slice的用法.【代码】

首先看到 www.w3school.cn上的解释:http://www.w3school.com.cn/jsref/jsref_slice_array.asp定义和用法slice() 方法可从已有的数组中返回选定的元素。语法arrayObject.slice(start,end)参数描述start必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。end可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数...

js 原型链 prototype proto【代码】【图】

1、说明函数（Function）才有prototype属性，对象（除Object）拥有__proto__。2、prototype与__proto__区别示例：<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><meta http-equiv="X-UA-Compatible" content="ie=edge"/><title>prototype与__proto__区别</title></head><body><script src="https://cdn.bootcss.com/lodash.js/4.17.10/...

javascript中的prototype属性

今天偶然发现一位高人写得好文章关于prototype，个人认为找不到比他讲得更精辟了。留作纪念，把地址留下，跟大家分享分享地址：http://www.cnblogs.com/yjf512/archive/2011/06/03/2071914.html原文：http://blog.csdn.net/laijieyao/article/details/43053495

首页 / JAVASCRIPT / 详解Javascript中prototype属性

详解Javascript中prototype属性

内容导读

内容图文

内容总结

内容备注

内容手机端

【详解Javascript中prototype属性】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程