js面向对象-原型链
var Person = function (name) { this.name = name;
} Person.prototype.say = function () { console.log(this.name);
} var p = new Person('hello'); p.say(); // 'hello'
这是一个最简单的面向对象的写法,那为什么通过 new 方法后赋值给 p 后 ,p可以调用say()方法!
我们来看看 new 为我们做了些什么
1.var p = {};
2.p.__proto__ = Person.prototype;
3.Person.call(p); 步骤1:初始化一个空对象
步骤2:将这个对象的 __proto__ 指向 Person.prototype
步骤3:初始化p
__proto__是什么鬼?
每一个对象的内部都会有一个__proto__属性,当我们想要查找某个对象的某个属性时,如果没有,他就会去__proto__属性里面去找,如果还是没找到,而__proto__属性里面又包含一个__proto__,就又去__proto__的__proto__里面去找.........,一直找到Object里面,如果还没有,就真的没有了!!
你可能有点晕,但是这就是js中的原型链机制,而这个__proto__就是这个链子。
这是 console.log(p) 产生的结果!
位置1: p.__proto__ 指向了一个对象,而这个对象就是 Person.prototype
位置2:这个__proto__是属于Person.prototype的,他指向Object.prototype
console.log(p.__proto__ == Person.prototype); // true console.log(Person.prototype.__proto__ == Object.prototype); //true
现在我们可以解释为啥p可以调用say()方法,p自己没有say()方法,但是因为它的__proto__属性指向了Person.prototype
恰巧 Person.prototype有say()方法,那要是Person.prototype里面还是没有呢?,那就去Person.prototype.__proto__
指向的Object.prototype里面去找,要是还是没有,那就真的没有了
这是一张脑图!非常形象的描述了js原型继承的机制
我们可以把上面的Cat mycat 换成我们的 Person p
console.log(p.__proto__ == Person.prototype);//true console.log(Person.prototype.__proto__ == Object.prototype); //true console.log(Person.__proto__ == Function.prototype); //true console.log(Function.prototype.__proto__ == Object.prototype); //true console.log({}.__proto__ == Object.prototype); //true
__proto__ __proto__ __proto__
A——————————》B——————————》C——————————》Object.prototype
所有对象最终都指向Object.prototype
A里面有就用A里面的,不会再去找了,如果没有就通过原型链去连接的B里面找,如果有就用B里面的,如果没有就去B连接的C里面去找,
如果C有,就用C的,如果没有就去Object.prototype找,如果还是没有,就真的没有了!!!
js面向对象-原型链的更多相关文章
- 怎么理解js的原型链继承?
前言 了解java等面向对象语言的童鞋应该知道.面向对象的三大特性就是:封装,继承,多态. 今天,我们就来聊一聊继承.但是,注意,我们现在说的是js的继承. 在js的es6语法出来之前,我们想实现js ...
- 前端基本知识(二):JS的原型链的理解
之前一直对于前端的基本知识不是了解很详细,基本功不扎实,但是前端开发中的基本知识才是以后职业发展的根基,虽然自己总是以一种实践是检验真理的唯一标准,写代码实践项目才是唯一,但是经常遇到知道怎么去解决这 ...
- js javascript 原型链详解
看了许多大神的博文,才少许明白了js 中原型链的概念,下面给大家浅谈一下,顺便也是为了巩固自己 首先看原型链之前先来了解一下new关键字的作用,在许多高级语言中,new是必不可少的关键字,其作用是为了 ...
- JS中原型链中的prototype与_proto_的个人理解与详细总结(**************************************************************)
一直认为原型链太过复杂,尤其看过某图后被绕晕了一整子,今天清理硬盘空间(渣电脑),偶然又看到这图,勾起了点回忆,于是索性复习一下原型链相关的内容,表达能力欠缺逻辑混乱别见怪(为了防止新人__(此处指我 ...
- 自己对js对原型链的理解
js对象分为2种 函数对象和普通对象 函数对象 比如 function Show(){}var x=function Show2(){}var b=new Function("show3&q ...
- JS中原型链继承
当我们通过构造函数A来实现一项功能的时候,而构造函数B中需要用到构造函数A中的属性或者方法,如果我们对B中的属性或者方法进行重写就会出现冗杂的代码,同时写出来也很是麻烦.而在js中每个函数都有个原型, ...
- JavaScript 随笔2 面向对象 原型链 继承
第六章 面向对象的程序设计 1.创建对象的几种方式 A)工厂模式 function CreatObj(name,sex,age){ this.name=name; this.sex=sex; this ...
- js的原型链和constructor
转载:http://www.108js.com/article/article1/10201.html?id=1092 请先瞻仰上边的这篇文章. 对象的原型链: box.__proto__.__pro ...
- js的原型链
js中的原型链是一个很重要的概念,理解了原型链,对js程序的开发有很大的好处,废话不说,先上图: javascript是基于原型的语言,所以一个对象可以另一个对象继承.不过javascript实现的时 ...
随机推荐
- PL/SQL基本概念
首先明确PL/SQL主要作用作用: SQL语言适合管理关系型数据库但是它无法满足更复杂的数据处理,所以产生PLSQL.PLSQL用户创建存储过程.函数.触发器.包及用户自定义的函数. 特点: PLSQ ...
- 社交媒体(朋友圈、微博、QQ空间)开发一网打尽,PC端移动端都有!——源码来袭!
一.应用场景 曾几何时,社交媒体已经驻扎到了几乎每个人的生活中.看看你身边的朋友,有几个不玩朋友圈的?就算他不玩朋友圈,那也得玩微博吧.再没有底线,也得玩QQ空间. 不过,作为程序员的我们,没事还是少 ...
- 对synchronized关键字的理解
先看两个线程同时访问一个对象的例子. public class Account { private String accountNo; private double balance; public A ...
- 学习git的使用--在当地的简单命令--01
<----------git安装完成后操作-----------------> git config --global user.name "scy"添加用户名git ...
- 开启AngularJS 1.X的学习之路(1)
概念(1) AngularJS 应用 AngularJS 模块(Module) 定义了 AngularJS 应用. AngularJS 控制器(Controller) 用于控制 AngularJS 应 ...
- 利用IIS和Nginx实现负载均衡
一直对Nginx反向代理和负载均衡感兴趣,今天在Windows下搭建了一个简单实例.步骤如下: 1.下载Nginx,我下载的是最新的1.11.10版本,地址http://nginx.org/downl ...
- css小技巧 :not 省时又省力
比如,要实现下面的效果(例如:一个列表的最后一项没有边框): See the Pen gmrGOV by 杨友存 (@Gavin-YYC) on CodePen. 一般的文档结构如下: <!-- ...
- 数据的增删改查(三层)<!--待补充-->
进行数据操作必然少了对数据的增删改查,用代码生成器生成的代码不是那么满意!方便在今后使用,这里就主要写“数据访问层(Dal)” 既然这里提到三层架构:有必要将三层内容在这里详细介绍一下(待补充) 注: ...
- webpack从0开始---(一)
换了新环境,同时也有了新目标,从webpack开始. webpack:具体是什么,大家还是自行去看吧,这里就不多做介绍了! 传送门---webpack.github.io 网上的安装方法很多,这里我就 ...
- 成为一名合格的ERP实施顾问应该具备哪些修为
要想成为一个合格ERP实施顾问,究竟需要点什么素质.请注意,这里的素质与技能是两码事,素质特别强调的是某种修养,技能可以速成,修养必须积累沉淀. 快速切入客户业务的能力 作为一个合格的ERP实施人员, ...