对于js原型和原型链继承的简单理解(第一种,原型链继承)
原型是js中的难点加重点,也是前端面试官最爱问的问题之一,因为面试官可以通过被面试者对原型的理解、来判断被面试者对js的熟悉程度。
原型的定义
Js所有的函数都有一个prototype属性,这个属性引用了一个对象,即原型对象,也简称原型。这个函数包括构造函数和普通函数,我们讲的更多是构造函数的原型,但是也不能否定普通函数也有原型。
先看一下普通函数的原型
例如:
function animal(){
}
//这个函数就有原型属性,引用的对象就是object
今天看了一个视频,那位老师讲的很清晰,在此感谢自学网的燕18老师!
接下来,我们通过一个构造函数的例子来了解原型。
function animal(){
this.name = function(){
document.write("我有名字<br/>");
}
}
function cat(){
this.climb = function(){
document.write("我会爬树<br/>");
}
}
function tiger(){
this.type = function(){
document.write("我是一直虎<br/>");
}
}
cat.prototype = new animal();//这里就是继承
tiger.prototype = new cat();
var smtiger = new tiger();
smtiger.climb();//这里输出“我会爬树”
smtiger.name(); //这里输出“我有名字”
我们new了一个对象小虎smtiger对象,而且在tiger的构造函数中只有一个type,它不会爬树,也没有名字;
但是!!!通过原型,tiger继承了cat,cat又继承了animal,所以:小虎会爬树,也有了名字。
js虽然没有类,但是却是面向对象的一门脚本语言,就是因为它可以通过prototype来实现继承
这样只看表面很不切实际,也很难理解,接下来分析一下具体的prototype和_proto_的关系

1、tiger()构造函数new一个tiger对象--》这个对象的_proto_指向cat对象,tiger()构造函数的prototype指向cat对象;
2、cat()构造函数new一个cat对象--》这个对象的_proto_指向animal对象,cat()构造函数的prototype指向animal对象;
3、animal()构造函数new一个animal对象--》这个对象的_proto_指向一个普通的object(也就是js的object“个人理解”),animal()构造函数的prototype指向普通的object对象,这个object对象有constructor的构造函数,指向animal(),所以anima其实是转了一圈又回来指向自己,表现为aniaml;
4、object()new一个obj对象--》这个对象的_proto_指向系统的object(应该就是window“个人理解”),object()的prototype指向系统的object对象;
5、系统的object对象指向null。
对于js原型和原型链继承的简单理解(第一种,原型链继承)的更多相关文章
- 对于js原型和原型链继承的简单理解(第三种,复制继承)
复制继承:简单理解,就是把父对象上的所有属性复制到自身对象上: function Cat(){ this.climb = function(){ alert("我会爬树"); } ...
- 简单理解javascript的原型prototype
原型和闭包是Js语言的难点,此文主要讲原型. 每一个方法都有一个属性是 prototype 每一个对象都有一个属性是 _proto_ 一旦定义了原型属性或原型方法,则所有通过该构造函数实例化出来的所有 ...
- js 继承的简单理解
什么是继承 js中的继承就是获取存在对象已有属性和方法的一种方式. 继承一 属性拷贝 就是将对象的成员复制一份给需要继承的对象. // 创建父对象 var superObj = { name:'liy ...
- 对于js原型和原型链继承的简单理解(第二种,对象冒充)
关键代码 this.parent = Cat; this.parent.apply(this); function Cat(){ this.climb = function(){ aler ...
- JS继承(简单理解版)
童鞋们,我们今天聊聊js的继承,关于继承,平时开发基本用不到,但是面试没有不考的,我就想问,这是人干的事吗? 好吧,迫于社会主义核心价值观,我们今天就来简单说一说js的继承,谁让它是面向对象编程很重要 ...
- 通过原型继承理解ES6 extends 如何实现继承
前言 第一次接触到 ES6 中的 class 和 extends 时,就听人说这两个关键字不过是语法糖而已.它们的本质还是 ES3 的构造函数,原型链那些东西,没有什么新鲜的,只要理解了原型链等这些概 ...
- Js 职责链模式 简单理解
js 职责链模式 的简单理解.大叔的代码太高深了,不好理解. function Handler(s) { this.successor = s || null; this.handle = funct ...
- 创建线程的两种方式:继承Thread类和实现Runnable接口
第一种方式:继承Thread类 步骤:1.定义类继承Thread 2.覆写Threa类的run方法. 自定义代码放在run方法中,让线程运行 3.调用线程的star方法, 该线程有两个作用:启动线程, ...
- js最好的继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法。
js最好的继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法. function ClassA(sColor) { this.color = sColor; } Class ...
随机推荐
- 如何使用sublime编辑器运行python程序
现在越发喜欢sublime编辑器了,不仅界面友好美观.文艺,可扩展性还特别强. sublime本身是不具备运行python程序的能力的,需要做些设置才可以.以下是安装好sublime后设置的步骤: 点 ...
- 下拉列表框Combo Box
Combo Box/Combo Box Ex 组合窗口是由一个输入框和一个列表框组成.创建一个组合窗口可以使用成员函数: BOOL CListBox::Create( LPCTSTR lpszText ...
- 自己动手开发编译器(五)miniSharp语言的词法分析器
稍微说明一点,整型常量和上面的标识符的词法,在调用lex.DefineToken时都多传了一个参数.这个参数是可选的描述信息,如果不传会直接使用正则表达式的字符串形式.而标识符的正则表达式有4万多个字 ...
- 性能测试工具--SIEGE安装及使用简介
官方网站http://www.joedog.org/ 概述 Siege是一个多线程http负载测试和基准测试工具.它有3种操作模式: 1) Regression (when invoked by bo ...
- android ConnectivityManager 检查是否有网络
一. ConnectivityManager 概要 ConnectivityManager是网络连接相关的管理器,它主要用于查询网络状态并在网络发生改变时发出状态变化通知.这个类主要负责的下列四个 ...
- 转:1.1 cdev_init cdev_alloc 使用说明
对 “从globalmem学习linux字符设备驱动” 的 cdev_init 和 cdev_alloc中一些不清楚的地方进行说明: cdev_init 和 cdev_alloc函数定义如下: ...
- Linux下如何发布Qt程序
在X11平台下qt程序,首先准备好程序中需要使用的资源,库和插件... 比如你的可运行程序取名叫作panel,那把你的panel,那些libQt*.so.4和libQt*.so.4.6.0(链接 ...
- oschina服务器软件
服务器软件 74Apache模块 54Nginx扩展模块 13Radius相关 94PaaS 系统 29服务发现/注册和协调 17Docker 扩展 7Docker 映像 83应用服务器 189HTT ...
- 计算新浪Weibo消息长度
此文为计算新浪Weibo的消息长度的方法. 就是 (发言请遵守社区公约,还可以输入119字). var getMessageLength = (function() { var byteLength ...
- bzoj1965 [Ahoi2005]SHUFFLE 洗牌
Description 为了表彰小联为Samuel星球的探险所做出的贡献,小联被邀请参加Samuel星球近距离载人探险活动. 由于Samuel星球相当遥远,科学家们要在飞船中度过相当长的一段时间,小联 ...