js对象分为2种

函数对象和普通对象

函数对象 比如

function Show(){}
var x=function Show2(){}
var b=new Function("show3","alert('bb')")

show、x、b都是函数对象 是可执行的 并且构造出普通对象

普通对象

var showobje=new Show()
var xobj=new x();
var bobj=new b();
var c={}

这些对象 都是普通对象

函数对象有个属性prototype,作用就是实现继承,他们指向一个自己构造的对象  比如 第一个function Show(){}的protoype就是: Show.prototype=new Show();

通过构造器构造的普通对象都有个一隐藏属性__proto__  这个属性指向他构造器prototype(普通对象是没有prototype)

以下面这个代码为例 来解释是怎么实现继承的

 function Person(name, age) {

            this.name = name;
this.age = age;
}
Person.prototype.eat=function() {
console.log(this.name + "正在吃饭");
} function Student(name, age, className) {
this.className = className;
Person.call(this,[name,age]);//实现继承属性
}
//学生继承人的特性
Student.prototype = Object.create(Person.prototype);
//实现子类自定义扩展方法
Student.prototype.doHomework=function() {
console.log(this.name + "正在做作业");
}
window.onload=function() {
//创建一个人
var person = new Person("小明", 12);
person.eat();//人正在吃饭 //创建一个学生
var stu = new Student("小胖", 12, "一年级");
stu.eat();
stu.doHomework();
}

输出一下 我们可以看到 学生通过原型继承了人吃饭的特性

function Person(name, age) {

this.name = name;
this.age = age;
}
我们知道Person也是一个对象(函数对象),并且这个对象拥有一个prototype属性 并且这个属性等于new person();一个空对象(这个构造的空对象的_proto_并没有_proto_ 所以当找到这一级 就到了原型链顶端 )
后来我们在这个空对象上添加了一个eat函数
Person.prototype.eat=function(){...}
为什么通过new Person()构造的对象能使用这个函数呢
因为我们通过函数构造一个对象 这个对象的_proto_属性就指向了构造他函数的prototype对象
类似
var obje=new Person()
obje._proto_=Person.prototype;
当我们使用obje.eat()调用函数的时候 会在当前对象的成员里面找 很遗憾 没有找到
那么通过对象的_proto_原型链条 向上找 这个时候我们在prototype找到eat方法 那么就eat.call(this)调用
如果没有找到 在通过prototype对象的_proto向上找 最终找到_proto_=new Object();在Obje对象 找eat方法 没有找到 那么再向下Object的 发现_proto_为null 还没有找到则报错

如下图

自己对js对原型链的理解的更多相关文章

  1. 前端基本知识(二):JS的原型链的理解

    之前一直对于前端的基本知识不是了解很详细,基本功不扎实,但是前端开发中的基本知识才是以后职业发展的根基,虽然自己总是以一种实践是检验真理的唯一标准,写代码实践项目才是唯一,但是经常遇到知道怎么去解决这 ...

  2. JS中原型链的理解

    new操作符具体干了什么呢?其实很简单,就干了三件事情. var obj = {}; obj.__proto__ = Base.prototype; Base.call(obj); 第一行,我们创建了 ...

  3. 关于js中原型链的理解

    我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,一个对象.无论什么时候,我们只要创建一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性对象 ...

  4. 谈谈我对 js原型链的理解

    想要学习 “原型链” 必须要认识什么是 “原型” 和 “原型链” 先理解一下普通的继承和原型的区别,下面写一段js代码来帮助理解: var Animal = function(){ // 动物抽象类 ...

  5. 怎么理解js的原型链继承?

    前言 了解java等面向对象语言的童鞋应该知道.面向对象的三大特性就是:封装,继承,多态. 今天,我们就来聊一聊继承.但是,注意,我们现在说的是js的继承. 在js的es6语法出来之前,我们想实现js ...

  6. 前端基本知识(二):JS的原始链的理解

    之前一直对于前端的基本知识不是了解很详细,基本功不扎实,但是前端开发中的基本知识才是以后职业发展的根基,虽然自己总是以一种实践是检验真理的唯一标准,写代码实践项目才是唯一,但是经常遇到知道怎么去解决这 ...

  7. js javascript 原型链详解

    看了许多大神的博文,才少许明白了js 中原型链的概念,下面给大家浅谈一下,顺便也是为了巩固自己 首先看原型链之前先来了解一下new关键字的作用,在许多高级语言中,new是必不可少的关键字,其作用是为了 ...

  8. javascript原型与原型链个人理解

    想了解原型和原型链,我觉得首先我们得知道javascript里有一个Object 与 Function,它俩都是构造函数,当然函数也是一个对象.我们打印Object 与 Function看一下, co ...

  9. 关于JS中原型链中的prototype与_proto_的个人理解与详细总结

    一直认为原型链太过复杂,尤其看过某图后被绕晕了一整子,今天清理硬盘空间(渣电脑),偶然又看到这图,勾起了点回忆,于是索性复习一下原型链相关的内容,表达能力欠缺逻辑混乱别见怪(为了防止新人__(此处指我 ...

随机推荐

  1. 《连载 | 物联网框架ServerSuperIO教程》- 9. 协议过滤器,解决一包多发、粘包、冗余数据

    1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架ServerSuperIO教程>1.4种通讯模式机制. <连载 | 物联网框架Serve ...

  2. Android 手机卫士3--设置中心

    1.要点击九宫格中的条目,需要注册点击事件 // 注册九宫格单个条目的点击事件 gv_home.setOnItemClickListener(new OnItemClickListener() { / ...

  3. 超级小的web手势库AlloyFinger发布

    简介 针对多点触控设备编程的Web手势组件,快速帮助你的web程序增加手势支持,也不用再担心click 300ms的延迟了.拥有两个版本,无依赖的独立版和react版本.除了Dom对象,也可监听Can ...

  4. 由于目标计算机积极拒绝,无法连接。 192.168.1.106:8078 说明: 执行当前 Web 请求期间,出现未经处理的异常。

    请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细信息. 异常详细信息: System.Net.Sockets.SocketException: 由于目标计算机积极拒绝,无法连接. 1 ...

  5. Google C++单元测试框架GoogleTest---值参数化测试

    值参数化测试允许您使用不同的参数测试代码,而无需编写同一测试的多个副本. 假设您为代码编写测试,然后意识到您的代码受到布尔参数的影响. TEST(MyCodeTest, TestFoo) { // A ...

  6. 自动化集成部署udeployer 批量统一安装一键部署

    通过jenkins构建项目:version版本控制:udployer自动化集成:ucop业务巡检做到高效高可用的自动化体系.   1.0版本: 逻辑与业务分离,完美实现逻辑与业务分离,业务实现统一sh ...

  7. Windows 7 在资源管理器中显示软件快捷方式

    该方法是利用资源管理器中储存网络位置的文件夹实现的, 不需要修改注册表. 效果如图: 操作方法: 在资源管理器中打开路径 "%appdata%\Microsoft\Windows\Netwo ...

  8. LVM 管理减少swap分区空间增加到根分区

    简介 LVM是 Logical Volume Manager(逻辑卷管理)的简写,它是Linux环境下对磁盘分区进行管理的一种机制,它由Heinz Mauelshagen在Linux 2.4内核上实现 ...

  9. 重叠div鼠标经过事件

    两个div重叠了,但是下面的div有鼠标移入移出事件,发现当鼠标移入或者移出时事件会执行两次,尝试了在上层div阻止事件,判断div所在位置……,后来发现只要一个css属性即可解决该问题,在上层div ...

  10. github常用操作

    1.创建一个新的repository: $cd ~/hello-world        //到hello-world目录,本地目录名与repository的名字不一定相同 $git init    ...