js里一切皆对象。有js自己内部的对象,还有用户自定义的对象。所有的对象都是从原型上衍生出来的。 原型本身也是对象,原型链的最高层就是Object。

两个重要的属性:prototype, __proto__

所有的对象都有__proto__属性,通过.__proto__一层一层,最后到达Object,Object的__Proto__是null,这样就形成了一个链,叫做原型链

prototype这个属性很特殊,只有指定的几个对象有prototype属性。常见的有:

  • Object.prototype
  • Number.prototype
  • Boolean.prototype
  • String.prototype
  • Function.prototype
  • 自定议函数名.prototype

用户自定义变量的查找顺序是按原生链从底往上查,如果查到Object.prototyp还是没有的话就返回undefined

以下是别人整理的原型链,我是看着有点晕,自己画了一个。

原型上的某个属性改变值的话,会直接影响到所有实例化出的对象的之一属性。var P = function(){}

P.prototype.a=1;
var man = new P();
console.log(man.a); //1
//只是给prototype的某个属性赋值的话,所有实例化的对象的对应的这个属性都会改变
//或者给prototype扩展添加了个新属性,所有实例化的对象也就具备 了这个属性,这就解释了原型链的查找。
P.prototype.a =2;
console.log(man.a); //2
//重新给prototype赋值后,之后所实例化出的对象就以新的原型为原型,之前的对象还是以之前的原型为原型,不具备新原型的属性。
P.prototype={t:2};
console.log(man.a); //2
console.log(man.t); //undefined
var woman = new P();
console.log(woman .a); //undefined
console.log(woman .t); //2

注意下边,obj2.a.b=0导致obj1.a.b也变成了0。是因为obj2.a访问的是obj1的引用,即obj2.a===obj1.a为true,所以b属性是同一个。  

var obj1={a:{b:5}};
var obj2= Object.create(obj1);
obj2.a.b=0;
console.log(obj1.a.b)//0

删除属性或方法 delete man.name

只能删除自己的属性,不能删除上级原生链里的属性。

与原生相关的方法:hasOwnProperty ,isPrototypeOf,getPrototypeOf

var a={b:1}
var b = Object.create(a)
a.isPrototypeOf(b) //true
a.hasOwnProperty("b") //true
b.hasOwnProperty("b") //true
Object.getPrototypeOf(b) === a //true

js实现继承。 js的继承其实就是把父亲的原型链拿给孩子当原型链用。下面创建个C,这样就避免了在不知道Super这个function内部做了什么处理,是不是还要传参的情况下,直接new Super的时候,可能会抛出异常。C的原型就是Super的原型,这样直接new C()得到的对象的原型就是Super.prototype.一般prototype还有一个constructor属性,给这个属性赋值为Child这个function。

因为这个是模拟的继承,所以Cat 里还需要显示的调用一下Animal的构造函数来取得Animal构造函数里的属性,所以我们给Child添加了一个属性为superClass,存放Super的原型。如下,在Cat的构造函数里直接使用 Cat.superClass.constructor.call(this,name)就调到了Animal的构造方法。如果不需要用Animal构造方法里的属性,可以不写这行代码。

  

refer:

https://juejin.im/post/5c72a1766fb9a049ea3993e6

https://juejin.im/post/5c4fdbae6fb9a049b07dc084

构造函数

构造函数有别于普通函数的点就是用new去使用它。

var P = function(){
this.name="";
this.showInfo= function(){
console.log(this.name);
}
}

 如果不用new,直接用P()话,this指的是 Window。用new时,this指的是新建的对象 。

所有从P实例化的对象都具有name和showInfo这两属性。

js的原型/原型链/构造函数的更多相关文章

  1. Js笔记(对象,构造函数,原型,原型链,继承)及一些不熟悉的语法

    对象的特性: 1.唯一标识性,即使完全不一样的对象,内存地址也不同,所以他们不相等 2.对象具有状态,同一个对象可能处在不同状态下 3.对象具有行为,即对象的状态可能因为他的行为产生变迁 Js直到es ...

  2. Js中的对象、构造函数、原型、原型链及继承

    1.对象 在传统的面向过程的程序设计中,会造成函数或变量的冗余.而JS中对象的目的是将所有的具有相同属性或行为的代码整合到一起,形成一个集合,这样就会方便我们管理,例如: var person1={  ...

  3. js基础篇——原型与原型链的详细理解

    js中的对象分为两种:普通对象object和函数对象function. function fn1(){}; var fn2 = function(){}; var fn3 = new Function ...

  4. JS面向对象之原型链

      对象的原型链 只要是对象就有原型 原型也是对象 只要是对象就有原型, 并且原型也是对象, 因此只要定义了一个对象, 那么就可以找到他的原型, 如此反复, 就可以构成一个对象的序列, 这个结构就被成 ...

  5. JS原型--原型链

    构造函数-->原型--->prototype-->__proto__-->constructor-->原型链 构造函数    什么是构造函数?我理解构造函数就是可以用来生 ...

  6. 深入理解JS对象和原型链

    函数在整个js中是最复杂也是最重要的知识 一个函数中存在多面性: 1.它本身就是一个普通的函数,执行的时候形成的私有作用域(闭包),形参赋值,预解释,代码执行,执行完 成后栈内存销毁/不销毁. 2.& ...

  7. js中的原型以及原型链

    在js中原型是每个构造函数的属性: 这个算 js 核心概念的一部分 var f1 = new Foo(); 对象 f1 的构造函数就是 Foo , f1的原型 __proto__ 就指向构造函数 Fo ...

  8. js中原型和原型链

    1.原型: 在JavaScript 中,对象被表现为prototype . 原型其实一直存在于我们接触过的任何一个对象. 2. Tip:在函数对象中也存在__proto__属性,但是查看函数对象的原型 ...

  9. js中的原型,原型链和继承

    在传统的基于Class的语言如Java.C++中,继承的本质是扩展一个已有的Class,并生成新的Subclass. 由于这类语言严格区分类和实例,继承实际上是类型的扩展.但是,JavaScript最 ...

  10. JS中的原型链和原型的认识

    这篇文章主要是学习一下JavaScript中的难点------原型和原型链 自定义一个对象 我们学习一门编程语言,必然要使用它完成一些特定的功能,而面向对象的语言因为符合人类的认知规律,在这方面做得很 ...

随机推荐

  1. FB面经Prepare: Find Longest Path in a Multi-Tree

    给的多叉树, 找这颗树里面最长的路径长度 解法就是在子树里面找最大的两个(或一个,如果只有一个子树的话)高度加起来. 对于每一个treenode, 维护它的最高的高度和第二高的高度,经过该点的最大路径 ...

  2. 《linux就该这么学》第十四节课:第13章,部署DNS域名解析服务(bind服务)

    (借鉴请改动)  第十二章收尾  12.2.nfs网络文件系统 RHEL7默认安装了nfs,配置文件在  /etc/export  写入格式:共享目录    允许的客户端(参数)  ro        ...

  3. 搭建apache本地服务器·Win

    1.下载apache地址:https://www.apachelounge.com/download/ 注意:下载压缩包如下 httpd-2.4.37-win64-VC15.zip 其中根据自己电脑的 ...

  4. Vue学习4:class与style绑定

    说明:有些部分我只是相当于做一个学习笔记,加强记忆之用.所以可能阅读性不是那么强.如果有参考我这类博客的人,那么请见谅. 代码如下: <!DOCTYPE html> <html la ...

  5. go basic

    go time and rand: package main import ( "fmt" "math/rand" "time" ) fun ...

  6. Oracle免安装绿色版-PLSQL连接报12154

    在环境变量添加 TNS_ADMIN  值是你的免安装客户端中sqlnet.ora   tnsnames.ora 所在的目录 参考地址:https://blog.csdn.net/feng_na/art ...

  7. C博客作业06--结构体&文件

    1.本章学习总结 1.1思维导图 1.2本章学习体会 学习了结构和文件,又是懵懵的课了,我的天啊.结构还好,题目集一出就做了,不是很难,感觉掌握的还可以,不过这只是感觉而已,等到真正来写大作业的时候又 ...

  8. Oarcle之group by关键字与having关键字

    group by关键字    *group by :分组由 作用: 用于对于查询的数据进行分组并进行处理 例如:select deptno ,job from emp group by deptno, ...

  9. 融云亮相GDG谷歌女性开发者大会 揭秘IMSDK网络优化策略

    4 月 20 日,冷雨阻碍不了天津GDG谷歌女性开发者大会的热烈召开,一众开发者.架构师和科技公司创业者云集一堂,就女性开发者的技术.职场.人生多方面话题展开深入探讨.活动由GDG (谷歌开发者社区) ...

  10. Swagger结合mustache模板生成后台接口代码、以及前后台建模代码

    之前项目中使用的的thrift来建模,维护前后台模型以及rest接口,前台使用的是angular2: 但是使用thrift只能生成建模,后台的rest接口的Controller文件还是需要手动去写,一 ...