JavaScript prototype原型实现继承

构造简单对象（函数也是一种对象，函数内的函数称为方法）当然prototype不是专门为解决上面问题而定义的，但是却解决了上面问题。了解了这些知识就可以构建一个科学些的、复用率高的对象，如果希望实例对象的属性或函数则定义到prototype中，如果希望每个实例单独拥有的属性或方法则定义到this中，可以通过构造函数传递实例化参数。代码如下:每个函数都有一个prototype属性，这个属性是指向一个对象的引用，这个对象称为原型对象，原型对象包含函数实例共享的方法和属性，也就是说将函数用作构造函数调用（使用new操作符调用）的时候，新创建的对象会从原型对象上继承属性和方法。

1、私有变量、函数（内部使用var创建）在函数内定义的变量和函数如果不对外提供接口，那么外部将无法访问到，也就是变为私有变量和私有函数。代码如下:

function Obj(){var a=0; //私有变量var fn=function(){ //私有函数}}

这样在函数对象Obj外部无法访问变量a和函数fn，它们就变成私有的，
只能在Obj内部使用，即使是函数Obj调用或者函数Obj的实例仍然无法访问这些变量和函数,代码如下:

var o=new Obj();console.log(o.a); //undefinedconsole.log(o.fn); //undefined

2、静态变量、函数（外部点语法添加）当定义一个函数后通过 “.”为其添加的属性和函数，通过对象本身仍然可以访问得到，但是其实例却访问不到，这样的变量和函数分别被称为静态变量和静态函数，用过Java、C#的同学很好理解静态的含义。代码如下:

function Obj(){}Obj.a=0; //静态变量Obj.fn=function(){ //静态函数}console.log(Obj.a); //0console.log(typeof Obj.fn); //functionvar o=new Obj();console.log(o.a); //undefinedconsole.log(typeof o.fn); //undefined

3、实例变量、函数（内部this添加）在面向对象编程中除了一些库函数我们还是希望在对象定义的时候同时定义一些属性和方法，实例化后可以访问，JavaScript也能做到这样, 代码如下:

function Obj(){this.a=[]; //实例变量this.fn=function(){ //实例方法}}console.log(typeof Obj.a); //undefinedconsole.log(typeof Obj.fn); //undefinedvar o=new Obj();console.log(typeof o.a); //objectconsole.log(typeof o.fn); //function

这样可以达到上述目的，然而
代码如下:


function Obj(){this.a=[]; //实例变量this.fn=function(){ //实例方法}}var o1=new Obj();o1.a.push(1);o1.fn={};console.log(o1.a); //[1]console.log(typeof o1.fn); //objectvar o2=new Obj();console.log(o2.a); //[]console.log(typeof o2.fn); //function

上面的代码运行结果完全符合预期，但同时也说明一个问题，在o1中修改了a和fn，而在o2中没有改变，由于数组和函数都是对象，
是引用类型，这就说明o1中的属性和方法与o2中的属性与方法虽然同名但却不是一个引用，而是对Obj对象定义的属性和方法的一个复制。
这个对属性来说没有什么问题，但是对于方法来说问题就很大了，因为方法都是在做完全一样的功能，但是却又两份复制，
如果一个函数对象有上千个实例方法，那么它的每个实例都要保持一份上千个方法的复制，这显然是不科学的，prototype应运而生。无论什么时候，只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个prototype属性，
默认情况下prototype属性会默认获得一个constructor(构造函数)属性，这个属性是一个指向prototype属性所在函数的指针。
代码如下:function Person(){}Person对象会自动获得prototyp属性，而prototype也是一个对象，会自动获得一个constructor属性，该属性正是指向Person对象。
当调用构造函数创建一个实例的时候，实例内部将包含一个内部指针（很多浏览器这个指针名字为__proto__）指向构造函数的prototype，
这个连接存在于实例和构造函数的prototype之间，而不是实例与构造函数之间。
代码如下:

function Person(name){this.name=name;}Person.prototype.share=[];Person.prototype.printName=function(){alert(this.name);}//对于添加原型属性变量和函数较多的情况，可将其包含在一个对象中，减少书写prototype的次数，注意此方式不能与上面的方式混用，否则会出现覆盖的可能。Person.prototype{printName:function(){alert(this.name);},printName:function(){alert(this.name);},...}var person1=new Person('Byron');var person2=new Person('Frank');person1.share.push(1);person2.share.push(2);console.log(person2.share); //[1,2]

果不其然！实际上当代码读取某个对象的某个属性的时候，都会执行一遍搜索，目标是具有给定名字的属性，搜索首先从对象实例开始，
如果在实例中找到该属性则返回，如果没有则查找prototype，如果还是没有找到则继续递归prototype的prototype对象，
直到找到为止，如果递归到object仍然没有则返回错误。
同样道理如果在实例中定义如prototype同名的属性或函数，则会覆盖prototype的属性或函数。
代码如下:

function Person(name){this.name=name;}Person.prototype.share=[];var person=new Person('Byron');person.share=0;console.log(person.share); //0，而不是prototype中的[]

构造简单对象
当然prototype不是专门为解决上面问题而定义的，但是却解决了上面问题。了解了这些知识就可以构建一个科学些的、复用率高的对象，
如果希望实例对象的属性或函数共享则定义到prototype中，如果希望每个实例单独拥有的属性或方法则定义到this中，
可以通过构造函数传递实例化参数。
代码如下:


function Person(name){this.name=name;}Person.prototype.share=[];Person.prototype.printName=function(){alert(this.name);}

原文地址：https://www.cnblogs.com/socool-hu/p/5665270.html

JavaScript prototype原型实现继承相关推荐

【面试必备】javascript的原型和继承
摘要: 原型.闭包.作用域等知识可以说是js中面试必考的东西,通过你理解的深度也就能衡量出你基本功是否扎实.今天来复习一下javascript的原型和继承,虽说是老生常谈的话题,但对于这些知识,自己亲 ...
JavaScript的原型和继承
目录一.原型 1.原型的特点 2.原型链查找原型链查找概念(重要) a)属性的遮蔽现象 b) 三种属性总结 c) 判定属性来自对象本身还是原型链 (d) 原型中的方法及其它类型的方法 3.原型链的 ...
JavaScript原型与继承的秘密
原文发布在dreamapplehappy/blog,本文如若有更新,都会在我的博客进行更新. 我们最想夸耀的事物,就是我们所未拥有的事物 <罗生门>- 芥川龙之介 JavaScript的原 ...
JavaScript 面向对象 (prototype 原型模式)
一. JavaScript 设计思想 1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.这是历史上第一个比较成熟的网络浏览器,轰动一时.但是,这个版本的浏览器只能用来浏览 ...
javascript es6 属性 __proto__ prototype 原型链简介
目录 prototype __proto__ 原型链构造函数创建对象实例今天同事小英童鞋问了我一个问题: function Foo(firstName, lastName){this.firstN ...
Javascript 原型和继承(Prototypes and Inheritance)
Javascript 原型和继承(Prototypes and Inheritance) 收藏前面我们看到了如何使用 constructor 来初始化对象.如果这样做,那么每一个创建的新对象都会对 ...
浅谈javascript中原型（prototype）、构造函数、对象实例及三者之间的关系
转自:http://www.cnblogs.com/zhangwei412827/archive/2012/12/14/2816263.html 浅谈javascript中原型(prototype). ...
图解JavaScript原型链继承
JavaScript是基于原型链的继承的,忘掉类的继承,从原型链入手. 普通对象函数对象 JavaScrip只有一种结构:对象通过new Function()创建的对象都是函数对象,其他都是普通对 ...
JavaScript中的原型和继承
请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans ...
JavaScript进阶学习（二）—— 基于原型链继承的js工具库的实现方法
文章来源:小青年原创发布时间:2016-07-03 关键词:JavaScript,原型链,jQuery类库转载需标注本文原始地址: http://zhaomenghuan.github.io... ...

JavaScript prototype原型实现继承

原文地址：https://www.cnblogs.com/socool-hu/p/5665270.html

JavaScript prototype原型实现继承相关推荐

最新文章

热门文章