对于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 ...
随机推荐
- JavaScript常用
打印日志 console.log 类型判断 第一种方式var type = Object.prototype.toString.call(list);console.log(type);第二种方式ty ...
- STL之优先队列(priority_queue)
转自网上大牛博客,原文地址:http://www.cnblogs.com/summerRQ/articles/2470130.html 先回顾队列的定义:队列(queue)维护了一组对象,进入队列的对 ...
- live555的编译及使用
live555是个流媒体C++开源库,VLC的Meida Player就使用了它的API完成的RTSP客户端,由于VLC的SDK没有提供相关record流到视频文件的API,所以我想用过live555 ...
- Android开发 解决AlertDialog中的EditText无法调出输入法的问题
在AlertDialog中使用自定义的View,如果View中有EditText,在上面点击,默认是跳不出软键盘的,不是焦点的问题.解决方法,有两种,一是把AlertDialog换成Dialog,但这 ...
- yiic模块module使用
模块是一个独立的软件单元,它包含 模型, 视图, 控制器 和其他支持的组件. 在许多方面上,模块看起来像一个 应用.主要的区别就是模块不能单独部署,它必须存在于一个应用里. 用户可以像他们访问普通应用 ...
- vs2010 sp1 创建silverlight 时,提示我 “在创建silverlight项目之前,您需要安装最新的silverlight Developer运行时
---恢复内容开始--- Silverlight 5 Developer Rumtime (32bit): http://go.microsoft.com/fwlink/?LinkId=229323 ...
- 为什么 HTTP 有时候比 HTTPS 好?
做为一家安全公司,我们在站点Stormpath上经常被开发者问到的是有关安全方面最优做法的问题.其中一个被经常问到的问题是: 我是否应当在站点上运行HTTPS? 很不幸,查遍整个因特网,你大多数情况下 ...
- 百度全站变https
今天打开百度首页,突然发现,百度的网址变为 https://www.baidu.com/,如下图: 好嘛,以后再也不怕别人使用抓包工具查看我在百度的搜索数据了.当年的Duck Duck Go就是因为是 ...
- ajax返回json数组遍历添加到html
大致需求为类型限制根据类型获取不同结果列表,再根据模糊查询搜索出结果,效果如下:
- JSP动作--JSP有三种凝视方式
一.JSP动作 动作是特殊的标记,通过一个动作标记能够实现多行Java代码实现的效果.能够动态插入文件.重用JavaBean组件.导向还有一个页面等. 动作元素和指令元素不同,动作元素是在client ...