先附上原型链的图,能看懂的本文就没必要看了,看不懂的可以带着疑问看文章

一、构造函数

什么是构造函数:当一个普通函数创建一个类对象是,那么就程它为构造函数。

特点:

默认首字母大写

使用new关键字来调用,并返回一个实例对象

内部使用this来构造属性和方法

this指向返回的新对象

function Person(name){
this.name = name
this.eat = function(){
console.log("方法")
}
} let per = new Person("小小")
per.eat()

二、原型

为什么需要原型:在一些场景中,比如人类行为有些要打游戏,有些要上学,有些要工作,但同时他们都需要吃饭和睡觉,但如果把每个人吃饭睡觉私有化使用的话就有点浪费内存,这时候就可以把这些每个人都需要做的行为统一拿出来放到一个公共的空间,每个人都有权限访问它,这样就可以节省内存。而实现共享的,这个时候就用到了原型 prototype。

什么是原型:每个函数对象都有一个prototype属性,这个属性的指向被称为该函数对象的原型对象,简称原型。

function Person(name){
this.name = name
// this.eat = function(){
// console.log("饭")
// }
} Person.prototype={
constructor:Person, //修改constructor的指向
eat:function(){
console.log("饭")
},
sleep:function(){
console.log("睡觉")
}
}
var per = new Person("小小")
var Per = new Person("大大")
console.log(per.eat === Per.eat) //true

以上案例我们看到Person的方法写到原型中的时候,实例化后的对象拿到的方法是共享的。

构造函数的prototype原型,实例对象可以直接访问,Person.prototype === per.__proto__

constructor是什么:

constructor 是实例对象和原型对象下的一个隐藏属性,指向构造函数

per.constructor === Person

Person.prototype.contructor === Person

三、原型链:

什么是原型链:实例对象与原型的连接关系,被称为原型链。

function Person(name){
this.name = name
} Person.prototype={
constructor:Person,
eat:function(){
console.log("饭")
},
sleep:function(){
console.log("睡觉")
}
}
var per = new Person("小小") console.dir(Person)
console.log(per)
console.log(per.__proto__ === Person.prototype) //true
console.log(per.__proto__.__proto__ === Person.prototype.__proto__) //true
console.log(Person.prototype.__proto__ === Object.prototype) //true

//---------------------------------------------------- console.log(Person.__proto__ === Function.prototype) //true
console.log(Person.__proto__.__proto__ === Function.prototype.__proto__) //true
console.log(Function.prototype.__proto__ === Object.prototype) //true

简单描述:

实例对象per的__proto__ 等于构造函数的prototype,per是Person的实例对象

Person.prototype原型对象的__proto__等于构造函数Object的prototype,Person.prototype是Object的实例对象

由此可见存在一个Object构造函数,同时Object也是Function的实例对象。

Object.prototype.__proto__ ===null

Object.__proto__ === Function.prototype

---------------------------------------------------------

构造函数Person是Function的实例对象

Function.prototype是Object的实例对象

4、new的原理

从上面案例中我们能看出实例对象是通过new构造函数而得到,从而建立了实例对象与原型的关系

这里我们猜想下new都做了什么?

1、接收一个函数方法体和参数

2、返回一个新对象

3、函数方法下的this指向新的对象

4、把新对象的__proto__指向构造函数的原型

简易版new

function Mynew(fn,...args){
if(typeof fn !== "function"){
throw "第一个参数必须是方法体"
}
let obj = {}
obj.__proto__ = Object.create(fn.prototype) fn.apply(obj,args) return obj
} let mynew = Mynew(Person,"哈哈")
console.log(mynew.name)
mynew.sleep()

js原型链原理的更多相关文章

  1. JS原型链原理(链表)

      任何一个对象都有一个prototype的属性,在js中可以把它记为:__proto__   当初ECMAscript的发明者为了简化这门语言,同时又保持继承的属性,于是就设计了这个链表..在数据结 ...

  2. JS原型链

    JS作为发展了多年了对象语言,支持继承,和完全面向对象语言不同的是,JS依赖原型链来实现对象的继承. 首先JS的对象分两大类,函数对象和普通对象,每个对象均内置__proto__属性,在不人为赋值__ ...

  3. 深入分析JS原型链以及为什么不能在原型链上使用对象

    在刚刚接触JS原型链的时候都会接触到一个熟悉的名词:prototype:如果你曾经深入过prototype,你会接触到另一个名词:__proto__(注意:两边各有两条下划线,不是一条).以下将会围绕 ...

  4. 深入理解JS原型链与继承

    我 觉得阅读精彩的文章是提升自己最快的方法,而且我发现人在不同阶段看待同样的东西都会有不同的收获,有一天你看到一本好书或者好的文章,请记得收藏起来, 隔断时间再去看看,我想应该会有很大的收获.其实今天 ...

  5. JS原型链与继承别再被问倒了

    原文:详解JS原型链与继承 摘自JavaScript高级程序设计: 继承是OO语言中的一个最为人津津乐道的概念.许多OO语言都支持两种继承方式: 接口继承 和 实现继承 .接口继承只继承方法签名,而实 ...

  6. js原型链与继承(初体验)

    js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解. 首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询 ...

  7. JS 原型链图形详解

    JS原型链 这篇文章是「深入ECMA-262-3」系列的一个概览和摘要.每个部分都包含了对应章节的链接,所以你可以阅读它们以便对其有更深的理解. 对象 ECMAScript做为一个高度抽象的面向对象语 ...

  8. js 原型链和继承(转)

    在理解继承之前,需要知道 js 的三个东西: 什么是 JS 原型链 this 的值到底是什么 JS 的 new 到底是干什么的 1. 什么是 JS 原型链? 我们知道 JS 有对象,比如 var ob ...

  9. 一张图看懂 JS 原型链

    JS 原型链,画了张图,终于理清楚各种关系有木有 写在最后: __proto__是每个对象都有的一个属性,而prototype是函数才会有的属性!!! function Person() { } 是函 ...

  10. 简单粗暴地理解js原型链–js面向对象编程

    简单粗暴地理解js原型链–js面向对象编程 作者:茄果 链接:http://www.cnblogs.com/qieguo/archive/2016/05/03/5451626.html 原型链理解起来 ...

随机推荐

  1. 修改tomcat服务器banner的方法

    对于工作中经常使用tomcat的童鞋来说,已经很习惯地看到tomcat看到下图: 但是在实际场景中,这个Banner给入侵者提供了一定的指示作用.为了安全起见,要求更改这个信息,以起到一定的迷惑作用. ...

  2. Windows Azure Web Site (7) Web Site配置

    <Windows Azure Platform 系列文章目录> 在上一章内容中,我们已经部署了Azure WebSite.我们可以在Web Site配置页面进行配置.如下图: 另外,我们还 ...

  3. PosPal银豹收银系统

    http://pospal.cn/pc.html 注册公司的地址,便宜的快法务 http://www.kuaifawu.com/

  4. js判断浏览器类型 js判断ie6不执行

    js判断浏览器类型 $.browser  对象 $.browser.version 浏览器版本 var binfo = ''; if ($.browser.msie) { binfo = " ...

  5. Application_Start

    这个时间是在第一次访问网站的时候触发..比如你发布了一个网站,,我第一个来访问,,就会触发这个事件..以后再有人来访问就不会触发了.. 一般的,我们总是以为Application_Start是一个应用 ...

  6. android开发之使用Messenger实现service与activity交互

    service与activity交互的方式有多种,这里说说使用Messenger来实现两者之间的交互. Service程序 public class MessengerService extends ...

  7. DX笔记之六------游戏画面绘图之透明特效的制作方法

    原文链接:http://blog.csdn.net/zhmxy555/article/details/7338082 透明效果 由于所有的图文件都是以矩形来储存的,我们也许会需要把一张怪兽图片贴到窗口 ...

  8. .Net Core学习地址

    官方教程:https://docs.microsoft.com/zh-cn/aspnet/core/ 入门无忧网:http://www.rm5u.com/netcore/netcore-intro.h ...

  9. Spring Boot的事务处理

    spring boot大大简化了之前java项目需要在配置xml里设置很多繁琐的内容. 设置数据源和配置事务 @Bean(name = "masterDataSource") @P ...

  10. 【POJ1083】 Moving Tables (并行的搬运)

    BUPT2017 wintertraining(15) #6E 题意 房间1和2,3和4,...,399和400共用一节走廊,有q次从房间li到ri的搬运桌子,一次搬运10分钟.两个搬运如果走廊有重叠 ...