JS原型与原型链继承的理解
一、原型
先从构造函数开始吧!
构造函数是什么?构造函数与其他函数唯一的区别在于调用方式不同。任何函数只要通过new来调用就可以作为构造函数,它是用来创建特定类型的对象。
下面定义一个构造函数 Female:
function Female(name){
this.name = name;
this.sex = 'female';
}
通过new命令来生成一个person实例:
var person1 = new Female("Summer")
这里,构造函数Female就是实例对象person1的原型!!!Female里的this关键字就指的是person1这个对象!
结论:原型对象(Person.prototype)是 构造函数(Person)的一个实例。
new出来的person1对象此时已经和Female再无联系了!也就是说每一个new出来的实例都有自己的属性和方法的副本,
是独立的的!修改其中一个不会影响另一个
var person1 = new Female("Summer");
var person2 = new Female("Lily");
person2.sex = 'male';
console.log(person1.sex) // female
console.log(person2.sex) // male
但是,我们希望构造函数中的sex属性是一个共有属性,那么此时用这样的方法,每个实例中都有一个相同的sex属性,会造成资源极大的浪费!
那么原型对象就即将登场了!Brendan Eich决定给每一个构造函数都设置一个prototype属性,这个属性就指向原型对象。
其实原型对象就只是个普通对象,里面存放着所有实例对象需要共享的属性和方法!所以,我们把需要共享的放到原型对象里,把那些不需要共享的属性和方法存在在构造函数里!
那么上面的代码可改写如下:
function Person(name,age){
this.name = name;
}
Person.prototype.sex = 'female';
var person1 = new Person("Summer");
var person2 = new Person("Lily");
console.log(person1.sex) // female
console.log(person2.sex) // female
Person.prototype.sex = 'male';
console.log(person1.sex) // male
console.log(person2.sex) // male
可以看出,修改prototype属性会影响它的所有实例的sex的值!!
实例一旦创建出来就会自动引用prototype对象的属性和方法!所以实例对象的属性和方法一般分为两种:一种是自身的,一种是引用自prototype的。
具体实现是这样的:
每当代码读取某个对象的某个属性的时候,都会执行一次搜索。首先从对象实例本身开始,如果在实例中找到了该属性,则返回该属性的值,
如果没有找到,则顺着原型链指针向上,到原型对象中去找,如果如果找到就返回该属性值。
这里要提一点,如果为对象实例添加了一个属性与原型中同名,则该属性会屏蔽掉原型中的同名属性,不会去修改它!
使用delete可以删除实例中的属性提到delete那要插一句~delete只能删除对象下的属性,不能删除变量和参数!
什么是原型链:只要是对象就有原型, 并且原型也是对象, 因此只要定义了一个对象, 那么就可以找到他的原型, 如此反复, 就可以构成一个对象的序列, 这个结构就被称为原型链
所有的实例有一个内部指针,指向它的原型对象,并且可以访问原型对象上的所有属性和方法。
先看JS通过原型链实现继承的方法,实现 Dog 继承 Animal 的所有属性和方法。
复制代码
//定义一个 Animal 构造函数,作为 Dog 的父类
function Animal () {
this.superType = 'wangcai';
} Animal.prototype.speak = 'wangwang' function Dog () {
this.name ='zhuzhu';
}
//给Dog对象添加一个_ proto_,指向一个 Animal 实例
Dog.prototype = new Animal(); //再创建一个实例 Pig
var Pig = new Dog() //Pig继承了Dog 和Animal的属性
console.log(Pig.speak) //wangwang 整个 Pig 对象是这样的
JS原型与原型链继承的理解的更多相关文章
- javascript中继承(一)-----原型链继承的个人理解
[寒暄]好久没有更新博客了,说来话长,因为我下定决心要从一个后台程序员转为Front End,其间走过了一段漫长而艰辛的时光,今天跟大家分享下自己对javascript中原型链继承的理解. 总的说来, ...
- js原型链理解(2)--原型链继承
1.原型链继承 2.constructor stealing(构造借用) 3.组合继承 js中的原型链继承,运用的js原型链中的__proto__. function Super(){ this.se ...
- 怎么理解js的原型链继承?
前言 了解java等面向对象语言的童鞋应该知道.面向对象的三大特性就是:封装,继承,多态. 今天,我们就来聊一聊继承.但是,注意,我们现在说的是js的继承. 在js的es6语法出来之前,我们想实现js ...
- js原型链+继承 浅析
名称: prototype--原型对象 __proto__--属性 原型链与继承网上搜索定义,看起来挺绕的 .先说继承: 所有的对象实例都可以共享原型对象包含的属性和方法 例如一个实例A ...
- 理解JS原型和原型链
本文通过对<JavaScript高级程序设计>第六章的理解,加上自己的理解,重组了部分内容,形成下面的文字. 理解了原型这个概念,你的JS世界会清明很多. 为什么要为JS创造原型这个概念 ...
- js原型链的深度理解!
一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object .Function 是 JS 自带的函数对象.下面举例说明 var o1 = ...
- 三张图搞懂JavaScript的原型对象与原型链 / js继承,各种继承的优缺点(原型链继承,组合继承,寄生组合继承)
摘自:https://www.cnblogs.com/shuiyi/p/5305435.html 对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__pro ...
- Js笔记(对象,构造函数,原型,原型链,继承)及一些不熟悉的语法
对象的特性: 1.唯一标识性,即使完全不一样的对象,内存地址也不同,所以他们不相等 2.对象具有状态,同一个对象可能处在不同状态下 3.对象具有行为,即对象的状态可能因为他的行为产生变迁 Js直到es ...
- JavaScript的原型链继承__propt__、prototype、constructor的理解、以及他们之间相互的关系。
回想自己已经工作了有一段时间了,但是自己对JavaScript的原型链.和继承的理解能力没有到位,最近他们彻底的整理并且复习了一遍. 本案例中部分文案来自网络和书籍,如有侵权请联系我,我只是把我的理解 ...
随机推荐
- 2019,.Net开发者的高光时刻
随着微软发布的一系列关于Windows..net和C#的公告,.Net开发者将在2019年,迎来自己的高光时刻,毕竟“世界上只有少数几种语言是多功能的,而没有一个像C#那样干净整洁.” 一.现在学C# ...
- C++记录(一)
1 extern 符表示该变量不是当前作用域定义的,用于声明. 如extern i;表示i不是当前作用域里的,是其他某个include的cpp文件里的变量. 2 int *p=0;相当于初始化p为空指 ...
- Windows Server 2016安装.NET Framework 3.5
1.打开“服务器管理器” 2.点击“添加角色和功能” 3.点击“下一步” 4.点击“下一步” 5.点击“下一步” 6.点击“下一步” 7.勾选“.NET Framework 3.5功能”,点击“下一步 ...
- Javascript自增、自减运算符
JavaScript自增.自减运算符与表达式语法 var i++; var-- 声明变量 i-- 变量名 ++ -- 自增运算符 JavaScript自增.自减运算符与表达式 JavaScript自增 ...
- ehcache注解全面解析
通过ehcache以编程方式使用缓存: 跟上面的方式相同,但是缓存通过ehcache去管理,当然比使用map有N多种好处,比如缓存太大了快达到上限之后,将哪一部分缓存清除出去.这种方式完全是通过代码的 ...
- Android学习01
一.线性布局(Linerlayout)和相对布局(Relativelayout) 线性布局可以分为水平线性布局(vertical)和垂直线性布局(horizontal)这两种布局方式weight权重按 ...
- Jmeter_正则表达式
元字符+限定符 元字符: . 任意字符 \d 任意单个数字 [0-9] 0-9 [a-z A-Z] 限定符 + 匹配至少大于1次 ? 匹配0次或者1次 * 匹配0次或者多次 {n}匹配n次 在线正则表 ...
- 消息队列(五)--- RocketMQ-消息存储1
问题 : 部署时如何知道自己是 broker 还是 NameServer topic 订阅信息放在哪里 broker 的作用到底是什么 纪录是如何持久化的 群发的时候,是如何储存消息的 send 方法 ...
- dp(小猪存钱罐)
B - Piggy-Bank 在acm能够做任何事情之前, 必须编制预算并获得必要的财政支持.这一行动的主要收入来自IBM.这个想法其实很简单,每当一些会员有一点小 ...
- java中4种常用线程池
一.线程池 线程池:说白了,就是一种线程使用模式.线程过多会带来调度开销,进而影响整体性能.而线程池维护着多个线程,等待着监督管理者分配可并发执行的任务,这避免了在处理短时间任务时创建与销毁线程的代价 ...
