日志

js原型链原理

 来源    2021-01-14    1  

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

一、构造函数

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

特点:

默认首字母大写

使用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原型链的工作原理
日志前言:原型链,即原型链条.它是由原型.原型的原型.原型的原型的原型...这一规则组合成的,经常被应用于继承. 原型的作用在JS中,每个对象都有自己的原型.当我们访问对象的属性和方法时,JS会先访问对象 ...
2
js原型链演示03-Foo.prototype-流程图
问答js原型链演示03-Foo.prototype::
1
简单粗暴地理解js原型链--js面向对象编程
日志原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧, ...
1
JavaScript中的原型链原理
日志  工作中经常解除到prototype的概念,一开始错误的认为prototype是对象的原型链,其实prototype只能算是JavaScript开放出来的原型链接口,真正的原型链概念应该是__pro ...
2
js 原型链
日志掌握 js 原型链,对理解 js 的指向有很大帮助,以下通过一个例子进行简单说明 <!DOCTYPE html> <html lang="en"> < ...
1
JS原型链
日志prototype,称为原型属性,这个属性是一个指针,指向一个对象,这个对象的用途就是包含所有实例共享的属性和方法(我们把这个对象叫做原型对象),原型对象中有个属性constructor,属性中包含着 ...
2
02 js原型链
日志1 js原型链是一个绕不开的话题.直接上说吧. /** * 1. js里的原型链是怎么样的? 带class 和不带class的原型链的不同. */ const util = require('util ...
1
JS原型链简单图解
日志JS中原型链,说简单也简单. 首先明确: 函数(Function)才有prototype属性,对象(除Object)拥有__proto__. 首先,我画了一张图. 所谓原型链,指的就是图中的proto ...
2
js原型链继承及调用父类方法
日志方法1: var Parent= function () { }; Parent.prototype.process = function(){ alert('parent method'); }; ...
2
js 原型链和继承(转)
日志在理解继承之前,需要知道 js 的三个东西: 什么是 JS 原型链 this 的值到底是什么 JS 的 new 到底是干什么的 1. 什么是 JS 原型链? 我们知道 JS 有对象,比如 var ob ...
1
js原型链的看法
日志原型链 对象 对象: 1,函数对象:由function创造出来的函数 2,普通对象:除开函数对象之外的对象,都是普通对象 **即普通对象obj是构造函数Object的一个实例,因此: obj.__pr ...
1
小谈js原型链和继承
日志原型(prototype)在js中可是担当着举足轻重的作用,原型的实现则是在原型链的基础上,理解原型链的原理后,对原型的使用会更加自如,也能体会到js语言的魅力. 本文章会涉及的内容 原型及原型对象 ...
1
JS原型链与继承别再被问倒了
日志原文:详解JS原型链与继承 摘自JavaScript高级程序设计: 继承是OO语言中的一个最为人津津乐道的概念.许多OO语言都支持两种继承方式: 接口继承 和 实现继承 .接口继承只继承方法签名,而实 ...
1
JS原型链中的prototype与_proto_的个人理解与详细总结
日志一直认为原型链太过复杂,尤其看过某图后被绕晕了一整子,今天清理硬盘空间(渣电脑),偶然又看到这图,勾起了点回忆,于是索性复习一下原型链相关的内容,表达能力欠缺逻辑混乱别见怪(为了防止新人__(此处指我 ...
1
js原型链和继承
日志在了解js原型链之前构造函数.原型对象.对象实例这几种概念必须要明白. 1. 创建对象有几种方法 //原型链指向object var o1={name:'o1'}; var o11=new Objec ...
2
js原型链继承
日志js原型链继承有很多种实现的方式,主要介绍以下3种: 一.拷贝继承: 顾名思义拷贝就是利用for in 或者jq的extend,把一个构造函数的prototype循环遍历赋值给另一个构造函数的prot ...
1
[js]js原型链继承小结
日志这是之前总结的, 发现有很多的毛病,就是重点不突出,重新翻看的时候还是得耗费很长时间去理解这玩意. js中的继承 js中什么是类 1,类是函数数据类型 2.每个类有一个自带prototype属性 pr ...
2
js 原型链(转)
日志1.1 理解原型链 JavaScript中几乎所有的东西都是对象,我们说数组是对象.DOM节点是对象.函数等也是对象,创建对象的Object也是对象(本身是构造函数),那么有一个重要的问题:对象从哪里 ...
1
深入分析JS原型链以及为什么不能在原型链上使用对象
日志在刚刚接触JS原型链的时候都会接触到一个熟悉的名词:prototype:如果你曾经深入过prototype,你会接触到另一个名词:__proto__(注意:两边各有两条下划线,不是一条).以下将会围绕 ...
2
js 原型链 prototype __proto__
日志1.说明 函数(Function)才有prototype属性,对象(除Object)拥有__proto__. 2.prototype与__proto__区别  示例: <!DOCTYPE htm ...
2