首页 技术 正文
技术 2022年11月6日
0 收藏 964 点赞 361 浏览 2252 个字

哇好久都没有写随笔啦,整个人都慵懒啦。
为了不让大家忘记我,把以前写过的一些慢慢发出来。

在JS 中, 有两条链子,作用域链 和 原型链.
作用域链相对容易理解,两点
– 函数限定变量作用域,就是说,在JavaScript中,在函数里面定义的变量,可以在函数里面被访问,但是在函数外无法访问
– 在JavaScript中使用变量,JavaScript解释器首先在当前作用域中搜索是否有该变量的定义,如果有,就是用这个变量;如果没有就到父域中寻找该变量. 由于变量提升,因此在实际开发的时候,推荐将变量都写在开始的地方,也就是在函数的开头将变量就定义好.

好了,开始看看原型链吧 .
## 原型链
在我之前的一些随笔,[JavaScript使用构造函数获取变量的类型名](http://www.cnblogs.com/likeFlyingFish/p/5840496.html)涉及了一些关于 Javascript 原型的东西,这里关于原型就不啰嗦了 .

在 Javascript 中, 每一个对象 o 都具有 `__proto__` 属性(这个属性在IE9 以下没有暴露出来),被称为原型 ,根据`属性搜索原则` 对象 o 可以通过`. `或者 `[]` 读取原型的属性,但是当写入时,不会在原型上修改属性,而是直接在对象 o 上添加.
当然,原型也是对象,原型也有`__proto__` 属性, 子子孙孙无穷尽也 ~~~

真的是无穷尽吗,当然不是 !

“`javascript
var obj = {a: ‘pawn’};
“`
上面通过对象字面值的方式申明了一个对象 `obj`,并且拥有属性 a .
![](https://img.zhankr.net/vcnqysf5ll510481.png)

由于 `o.__proto__ === Object.prototype`,那么可以认为这种方式等价于
“`javascript
var obj = new Object({a: 10});
“`
所以,o 是继承自 `Object.prototype`,但 `Object.prototype` 也是对象,它继承自什么呢?
![](https://img.zhankr.net/up0hoavjitf10482.png)

好吧,它继承自 null , 万剑归宗。

好了,现在找到了原型链的第一条子链
![](https://img.zhankr.net/khdzlbc12zi10483.png)

我们在来看 `function`
“`javascript
var func = function() {}
“`
通过字面值声明一个`function`
同理
![](https://img.zhankr.net/y1a424dzuht10484.png)

`func` 继承自`Function.prototype`,那 `Function.prototype` 也是对象,它继承自什么呢?
![](https://img.zhankr.net/fkkdobvakih10485.png)

可以看到,`Function.prototype` 继承自`Object.prototype`,这也就回到了上一条链子.
![](https://img.zhankr.net/r1kerbgemnk10486.png)

好了,那现在引入一个问题,`Function` 本身也是函数,那 `Function`继承自哪呢? 当然是 `Function.prototype`,所以JS中最乱伦的东西出现了,`Function` 是自己的老子,即
![](https://img.zhankr.net/ypqsgfbn3at10487.png)

![](https://img.zhankr.net/epy5qhhjfg210488.png)

那 `Object` 也是函数,`Object` 也当然继承自 `Function.prototype` .
![](https://img.zhankr.net/zejij1xojke10489.png)

好了,这就是所有原型链的东西

看起来好像很乱,盗 JK老师 一张图, 详细说明这个问题

![](https://img.zhankr.net/zh2nk4l4adb10490.gif)

现在做一个总结
– 所有的函数都继承自 `Function.prototype`,`Function`,`Object` 是函数,所以继承自 `Function.prototype`
– 所有的对象都直接或间接继承自 `Object.prototype`,`Function.prototype.__proto__ === Object.prototype`函数也是对象,所以函数最终继承自`Object.prototype` .
– Object.prototype 继承自 null,万剑归宗

## 原型继承
看完了原型链,再看原型继承就简单了

“`javascript
var ProtoHerite = function(source) {
var o = {};
if(o.__proto__){
o.__proto__ = source;
return o;
}

var F = function() {};
F.prototype = source;
return new F();
}
“`
这个函数返回的对象原型继承自 `source`,这也是 `Object.create(source)` 实现思路.

如果觉得图画的还可以,其实我原来是学美术的 .

如果有错,望不吝赐教

转载请说明原文出处 http://www.cnblogs.com/likeFlyingFish/p/6505324.html

上一篇: USB重定向
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,085
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,560
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,409
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,182
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,819
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,902