文档章节

js 原型 原型链(入门梳理)

那小么
 那小么
发布于 2017/03/30 23:00
字数 1204
阅读 25
收藏 1

先梳理下构造函数 ,构造函数与普通函数没有区别,只是大家有个默契 就是构造函数的函数名首字母应大写.. 怎样区分构造函数呢,就是调用的时候由new调用的函数就是构造函数了.为什么用构造函数呢,这个也好理解,总不能相似的功能都要复制粘贴吧...

比如

function Fn(name){

this.name = name,

this.showname = function(){

console.log(this.name);

}

}

new Fn("is name").showname();

为何fn函数内的this不是指向window呢,因为用new调用的函数会改变this指向的..这段代码其实是这样的

function Fn(name){

var o = {};

o.name = name;

o.showname=function(){

console.log(o.name)

}

return o

}

new Fn("is name").showname();

原来this替换了o ,并且会隐私的创建一个对象(var o = {} )和返回这个对象(return o),这俩能力是new自带的,别人骗不走的,,要是直接调用第一段代码 this依然指向window..这也正是new可以改变this指向的原因,而这种简写(直接用this 的写法)就是大名鼎鼎的工场模式了,这个模式有个缺点,还是挺大的缺点 像是这样:

function Fn(name){

var o = {};

o.name = name;

o.showname=function(){

console.log(o.name)

}

return o

}

var app1 = new Fn("is name");

var app2 = new Fn("is name");

console.log( app1.showname === app2.showname , app1.prototype === app2.prototype)//false true

 app1与app2的原型是相等的,而他们有了各自的方法与属性,即便值一样也不相等.. 其实也好理解,每次new的时候 都会创建一个新的object么(var o ={}). 虽然这样问题不大,但是本着能优化就优化的原则,伟大的前辈们研究出了一种叫做原型模式的构造函数即:

function Fn(name){

this.name = name;

}

Fn.prototype.showname = function(){

console.log(this.name)

}

var app1 = new Fn("is name");

var app2 = new Fn("is name");

console.log( app1.showname === app2.showname , app1.prototype === app2.prototype)// true true

直接在原型对象上添加公用的方法,在函数内部书写自己的属性.又节约了一点内存让偶们浪费在别的地方~~~.来了个新伙伴prototype,这是个什么鬼?Js中一切皆对象..function也不例外。而prototype是对象(object)的原型对象。简单点理解 任何对象都有自己的原型对象,而prototype是访问这个对象的渠道.默认情况下这个原型对象只有一个默认的属性即

Construtor 这又是个啥东西呢?Construtor 的值是当前原型对象的构造函数.,这就形成了一个闭环, 以上边代码为例 Fn函数的原型对象有个Construtor 属性和我们自己添加的showname方法.  Construtor 的值就是Fn; ps:这里是三个对象一个是fn函数返回的对象一个是fn函数对象的原型对象还有一个是fn函数对象; 为了更好理解上代码:

function Fn(name){//Fn函数对象

this.name = name;

}

Fn.prototype.showname = function(){// fn函数对象的原型对象

console.log(this.name)

}

var app = new Fn("lkj");//fn函数返回的对象

app.showname = function(){

console.log("not "+this.name)

}

app.showname()//not name

当我们调用showname方法时,会优先调用fn构造函数返回对象的showname方法; 也就是对象的属性或方法优先级高于原型对象上的属性或方法.利用这个特点就可以重写继承的属性或方法..既然每个对象都有自己的原型对象,那么身为原型对象本身也是对象啊,自然也有自己的原型对象..怎么去访问呢,,没错现代浏览器才规范或是支持的一个属性”__proto__”,传说中的原型链出现了.现在我们的原型对象默认又多了个属性。它就是用来访问原型对象的原型对象是谁

function Fn(name){

this.name = name;

}

Fn.prototype.showname = function(){

console.log(this.name)

}

function Fnn(age){

this.age = age;

}

Fnn.prototype = new Fn("name")

Fnn.prototype.showage = function(){

console.log(this.age)

}

var app1 = new Fnn(30);

console.log(Fnn.prototype.__proto__.__proto__.__proto__)// null

直到最后返回null Object的原型对象所对应的原型对象是null.以上面代码为例 当调用app1.showname();时 原型链时这样查找的: 先看app1这个对象本身有没有此方法,没有就去查找对应的构造函数对象有没有次方法(Fnn) 没有继续查找这个构造函数对象的原型对象有没有此方法(fnn.prototype) 没有继续找原型对象的原型对象的构造函数(Fn) 没有继续这个构造函数的原型对象(Fn.prorotype).....一直到最后null; 这下我们很多事情就豁然开朗了.比如为啥原型上的东西都是共享的. 如何定义自己私有的方法属性.继承这块有时间在梳理...

最后欢迎大神指正

© 著作权归作者所有

那小么
粉丝 3
博文 10
码字总数 9804
作品 0
朝阳
前端工程师
私信 提问
《前端面试手记》之JavaScript基础知识梳理(下)

👇 内容速览 👇 实现ES5继承的4种方法 原型和原型链 作用域和作用域链 Event Loop 执行上下文 闭包的理解和分析 🔍查看全部教程 / 阅读原文🔍 ES5继承 题目:ES5中常用继承方法。 方...

godbmw
04/03
0
0
JS 总结之原型继承的几种方式

在之前的总结中,我们详细分析了原型《JS 总结之原型》,原型很大作用用于模拟继承,这一次,我们来聊原型继承的几种方式。 🌶 前提 以一个父类为前提条件,列举 js 继承的继承方式: 🍖...

Karon_
2018/12/24
0
0
图解javascript原型链

作者: HerryLo 本文永久有效链接: https://github.com/AttemptWeb...... 原型链和原型对象是js的核心,js以原型链的形式,保证函数或对象中的方法、属性可以让向下传递,按照面向对象的说法,...

HerryLo
09/06
0
0
深入学习js之——原型和原型链

开篇: 在Brendan Eich大神为JavaScript设计面向对象系统的时候,借鉴了 和这两门 基于原型的语言,之所以选择基于原型的面向对象系统,并不是因为时间匆忙,它设计起来相对简单,而是因为从...

MagicalLouis
01/29
0
0
JS基础-函数、对象和原型、原型链的关系

JS的原型、原型链一直是比较难理解的内容,不少初学者甚至有一定经验的老鸟都不一定能完全说清楚,更多的"很可能"是一知半解,而这部分内容又是JS的核心内容,想要技术进阶的话肯定不能对这个...

OBKoro1
08/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Gradle 的项目导入到 IntelliJ 后子项目源代码不能导入

在一个 Gradle 项目中,有若干子项目。 当 Gradle 到如后,子项目不能被 IntelliJ 识别代码。 如下图的这个代码就没有被自动识别。 这个有可能是因为你的这个子项目没有被添加到父项目中。 ...

honeymoose
25分钟前
4
0
苹果cms下载地址及模板地址

https://github.com/magicblack/maccms10 程序下载: https://www.lanzous.com/b204882 教程下载: https://www.lanzous.com/b256378 模板下载: https://www.lanzous.com/b355667 插件下载:......

chenhongjiang
26分钟前
4
0
Java中使用HttpPost上传文件以及HttpGet进行API请求(包含HttpPost上传文件)

一、HttpPost上传文件 public static String getSuffix(final MultipartFile file){ if(file == null || file.getSize() == 0){ return null; } String......

codeobj
27分钟前
4
0
在Word中怎样批量删除空行,这些点主要注意

在工作中经常接触的办公软件就是Word了,熟练使用Word中的技能是准时下班的保证。这就要求我们对Word中的各项技能都熟练于心,很多朋友诉苦Word中的排版不熟悉,每次写一篇文章排版都要花费很...

干货趣分享
33分钟前
3
0
终端-Linux命令之非交互SSH密码验证-Sshpass

> Sshpass是使用SSH所谓的“交互式键盘密码身份验证”以非交互方式执行密码身份验证的工具 通俗来说就是 使用ssh密码登录 是需要在连接时手动输入密码的,没办法明文连接,如下图,需要交互的...

极客收藏夹
36分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部