原型是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原型和原型链继承的简单理解(第一种,原型链继承)的更多相关文章

  1. 对于js原型和原型链继承的简单理解(第三种,复制继承)

    复制继承:简单理解,就是把父对象上的所有属性复制到自身对象上: function Cat(){ this.climb = function(){ alert("我会爬树"); } ...

  2. 简单理解javascript的原型prototype

    原型和闭包是Js语言的难点,此文主要讲原型. 每一个方法都有一个属性是 prototype 每一个对象都有一个属性是 _proto_ 一旦定义了原型属性或原型方法,则所有通过该构造函数实例化出来的所有 ...

  3. js 继承的简单理解

    什么是继承 js中的继承就是获取存在对象已有属性和方法的一种方式. 继承一 属性拷贝 就是将对象的成员复制一份给需要继承的对象. // 创建父对象 var superObj = { name:'liy ...

  4. 对于js原型和原型链继承的简单理解(第二种,对象冒充)

    关键代码    this.parent = Cat;    this.parent.apply(this); function Cat(){ this.climb = function(){ aler ...

  5. JS继承(简单理解版)

    童鞋们,我们今天聊聊js的继承,关于继承,平时开发基本用不到,但是面试没有不考的,我就想问,这是人干的事吗? 好吧,迫于社会主义核心价值观,我们今天就来简单说一说js的继承,谁让它是面向对象编程很重要 ...

  6. 通过原型继承理解ES6 extends 如何实现继承

    前言 第一次接触到 ES6 中的 class 和 extends 时,就听人说这两个关键字不过是语法糖而已.它们的本质还是 ES3 的构造函数,原型链那些东西,没有什么新鲜的,只要理解了原型链等这些概 ...

  7. Js 职责链模式 简单理解

    js 职责链模式 的简单理解.大叔的代码太高深了,不好理解. function Handler(s) { this.successor = s || null; this.handle = funct ...

  8. 创建线程的两种方式:继承Thread类和实现Runnable接口

    第一种方式:继承Thread类 步骤:1.定义类继承Thread 2.覆写Threa类的run方法. 自定义代码放在run方法中,让线程运行 3.调用线程的star方法, 该线程有两个作用:启动线程, ...

  9. js最好的继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法。

    js最好的继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法. function ClassA(sColor) { this.color = sColor; } Class ...

随机推荐

  1. UCOS 信号量的初值问题

    当 pend请求发出的时候信号量的值减1,当post的时候信号量的值加1,信号量的值0跟1分别是用来同步跟互斥的,什么是同步,什么是互斥呢...假设你把信号量的值设为0,有A,B连个任务,当A发出pe ...

  2. 高性能Socket组件和RPC,让你像写本地代码一样开发网络应用和分布式程序

    最近想试试C#能不能写出高性能的分布式组件,于是写了一个双工RPC,也当练手,下面是单连接的测试结果,非常给力.机器配置:U:E1230-v2,内存:ddr3-8G 1.递归调用    过程:Clie ...

  3. 使用hexo创建github博客

    前言 前面说过,之前用wordpress辛辛苦苦搭建的博客,因为服务器和域名的问题挂掉了.后来发现github也能够搭建自己的博客,不需要去关心主机域名的问题,而且还能使用Markdown来写博客,就 ...

  4. (转)關於flashback query的ORA-01466錯誤

    摘自:http://blog.sina.com.cn/s/blog_70a2bdb80100pqid.html 使用Oracle 10g 新特性flashback query來查詢過去修改並已提交的記 ...

  5. Entity Framework with MySQL 学习笔记一(关系整理版)

    1-1 设置 //DataAnnotation 1-1 | 1-0 table //SQLtable : member , columns : memberId, name //SQL basic l ...

  6. uva 10020 Minimal coverage

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  7. LeetCode _ Word Break

    Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separa ...

  8. YII增加全局函数

    法1: 在使用Yii开发中我们经常会遇到一个问题,每次使用Yii的组件.扩展等,我们会像下面一样去写: <?php Yii::app()->user; Yii::app()->get ...

  9. 广州Uber优步司机奖励政策(12月28日到1月3日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  10. JavaScript基础知识(学习笔记)

    1.    在JavaScript中所有事物都是对象:字符串.数字.数组.日期等等2.    在JavaScript中,对象是拥有属性和方法的数据3.    属性是与对象相关的值,方法是能够在对象上执 ...