Fork me on GitHub
Kurt's blog

good good study, day day up


  • 首页

  • 分类

  • 归档

  • 标签

  • 作品

  • 关于

深入理解javascript原型和闭包(7)--原型的灵活性

发表于 2017-04-16 | 分类于 JavaScript , 王福朋-深入理解javascript原型和闭包系列
原文地址深入理解javascript原型和闭包(7)——原型的灵活性

在Java和C#中,你可以简单的理解class是一个模子,对象就是被这个模子压出来的一批一批月饼(中秋节刚过完)。压个啥样,就得是个啥样,不能随便动,动一动就坏了。

而在javascript中,就没有模子了,月饼被换成了面团,你可以捏成自己想要的样子。

首先,对象属性可以随时改动。

对象或者函数,刚开始new出来之后,可能啥属性都没有。但是你可以这会儿加一个,过一会儿在加两个,非常灵活。

在jQuery的源码中,对象被创建时什么属性都没有,都是代码一步一步执行时,一个一个加上的。
7-1.png
其次,如果继承的方法不合适,可以做出修改。

1
2
3
4
5
var obj = {a: 10, b: 20}
console.log(obj.toString()) // [object Object]
var arr = [1, 2, true]
console.log(arr.toString()) // 1,2,true

如上代码,Object和Array的toString()方法不一样。肯定是Array.prototype.toString()方法做了修改。

阅读全文 »

深入理解javascript原型和闭包(6)--继承

发表于 2017-04-16 | 分类于 JavaScript , 王福朋-深入理解javascript原型和闭包系列
原文地址深入理解javascript原型和闭包(6)——继承

为何用“继承”为标题,而不用“原型链”?

原型链如果解释清楚了很容易理解,不会与常用的java/C#产生混淆。而“继承”确实常用面向对象语言中最基本的概念,但是java中的继承与javascript中的继承又完全是两回事儿。因此,这里把“继承”着重拿出来,就为了体现这个不同。

javascript中的继承是通过原型链来体现的。先看几句代码

1
2
3
4
5
6
7
8
9
10
function Foo() { }
var f1 = new Foo()
f1.a = 10
Foo.prototype.a = 100
Foo.prototype.b = 200
console.log(f1.a) // 10
console.log(f1.b) // 200

以上代码中,f1是Foo函数new出来的对象,f1.a是f1对象的基本属性,f1.b是怎么来的呢?——从Foo.prototype得来,因为f1.proto指向的是Foo.prototype

访问一个对象的属性时,先在基本属性中查找,如果没有,再沿着__proto__这条链向上找,这就是原型链 。

看图说话:
6-1.png

上图中,访问f1.b时,f1的基本属性中没有b,于是沿着proto找到了Foo.prototype.b。

阅读全文 »

深入理解javascript原型和闭包(5)--instanceof

发表于 2017-04-16 | 分类于 JavaScript , 王福朋-深入理解javascript原型和闭包系列
原文地址深入理解javascript原型和闭包(5)——instanceof

又介绍一个老朋友——instanceof。

对于值类型,你可以通过typeof判断,string/number/boolean都很清楚,但是typeof在判断到引用类型的时候,返回值只有object/function,你不知道它到底是一个object对象,还是数组,还是new Number等等。

这个时候就需要用到instanceof。例如:

1
2
3
4
function Foo() {}
var f1 = new Foo()
console.log(f1 instanceof Foo); // true
console.log(f1 instanceof Object); // true

上图中,f1这个对象是被Foo创建,但是“f1 instanceof Object”为什么是true呢?

至于为什么过会儿再说,先把instanceof判断的规则告诉大家。根据以上代码看下图:
5-1.png
Instanceof运算符的第一个变量是一个对象,暂时称为A;第二个变量一般是一个函数,暂时称为B。

Instanceof的判断队则是: 沿着A的__proto__这条线来找,同时沿着B的prototype这条线来找,如果两条线能找到同一个引用,即同一个对象,那么就返回true。如果找到终点还未重合,则返回false 。

按照以上规则,大家看看“ f1 instanceof Object ”这句代码是不是true? 根据上图很容易就能看出来,就是true。

通过上以规则,你可以解释很多比较怪异的现象,例如:

1
2
3
console.log(Object instanceof Function); // true
console.log(Function instanceof Object); // true
console.log(Function instanceof Function); // true

这些看似很混乱的东西,答案却都是true,这是为何?

阅读全文 »

深入理解javascript原型和闭包(4)--隐式原型

发表于 2017-04-16 | 分类于 JavaScript , 王福朋-深入理解javascript原型和闭包系列
原文地址深入理解javascript原型和闭包(4)——隐式原型
注意:本文不是javascript基础教程,如果你没有接触过原型的基本知识,应该先去了解一下,推荐看《javascript高级程序设计(第三版)》第6章:面向对象的程序设计。

上节已经提到, 每个函数function都有一个prototype ,即原型。这里再加一句话—— 每个对象都有一个__proto__ ,可成为隐式原型。

这个proto是一个隐藏的属性,javascript不希望开发者用到这个属性值,有的低版本浏览器甚至不支持这个属性值。所以你在Visual Studio 2012这样很高级很智能的编辑器中,都不会有proto的智能提示,但是你不用管它,直接写出来就是了。

1
2
var obj = {};
console.log(obj.__proto__);

4-1.png

上面截图看来,obj.proto和Object.prototype的属性一样!这么巧!

答案就是一样。

obj这个对象本质上是被Object函数创建的,因此obj.proto=== Object.prototype。我们可以用一个图来表示。
4-2.png
即, 每个对象都有一个__proto__属性,指向创建该对象的函数的prototype 。

阅读全文 »

深入理解javascript原型和闭包(3)--prototype原型

发表于 2017-04-16 | 分类于 JavaScript , 王福朋-深入理解javascript原型和闭包系列
原文地址深入理解javascript原型和闭包(3)——prototype原型

既typeof之后的另一位老朋友!

prototype也是我们的老朋友,即使不了解的人,也应该都听过它的大名。如果它还是您的新朋友,我估计您也是javascript的新朋友。

在咱们的第一节(理解javascript原型和作用域系列(1)——一切都是对象)中说道,函数也是一种对象。他也是属性的集合,你也可以对函数进行自定义属性。

不用等咱们去试验,javascript自己就先做了表率,人家就默认的给函数一个属性——prototype。对,每个函数都有一个属性叫做prototype。

这个prototype的属性值是一个对象(属性的集合,再次强调!),默认的只有一个叫做constructor的属性,指向这个函数本身。
3-1.png
如上图,SuperType是是一个函数,右侧的方框就是它的原型。

原型既然作为对象,属性的集合,不可能就只弄个constructor来玩玩,肯定可以自定义的增加许多属性。例如这位Object大哥,人家的prototype里面,就有好几个其他属性。
3-2.png
咦,有些方法怎么似曾相似?

对!别着急,之后会让你知道他们为何似曾相识。

接着往下说,你也可以在自己自定义的方法的prototype中新增自己的属性

1
2
3
4
5
function Fn() { }
Fn.prototype.name = '王福朋';
Fn.prototype.getYear = function () {
return 1988;
};

看到没有,这样就变成了
3-3.png
没问题!

阅读全文 »

深入理解javascript原型和闭包(2)--函数和对象的关系

发表于 2017-04-16 | 分类于 JavaScript , 王福朋-深入理解javascript原型和闭包系列
原文地址深入理解javascript原型和闭包(2)——函数和对象的关系

上文(理解javascript原型和作用域系列(1)——一切都是对象)已经提到,函数就是对象的一种,因为通过instanceof函数可以判断。

1
2
var fn = function () { };
console.log(fn instanceof Object); // true

对!函数是一种对象,但是函数却不像数组一样——你可以说数组是对象的一种,因为数组就像是对象的一个子集一样。但是函数与对象之间,却不仅仅是一种包含和被包含的关系,函数和对象之间的关系比较复杂,甚至有一点鸡生蛋蛋生鸡的逻辑,咱们这一节就缕一缕。

还是先看一个小例子吧。

1
2
3
4
5
function Fn() {
this.name = '王福朋';
this.year = 1988;
}
var fn1 = new Fn();

上面的这个例子很简单,它能说明:对象可以通过函数来创建。对!也只能说明这一点。

但是我要说—— 对象都是通过函数创建的 ——有些人可能反驳:不对!因为:

1
2
var obj = { a: 10, b: 20 };
var arr = [5, 'x', true];

但是不好意思,这个——真的——是一种——“快捷方式”,在编程语言中,一般叫做“语法糖”。
做“语法糖”做的最好的可谓是微软大哥,它把他们家C#那小子弄的不男不女从的,本想图个人见人爱,谁承想还得到处跟人解释——其实它是个男孩!
话归正传——其实以上代码的本质是:

1
2
3
4
5
6
7
8
9
10
11
//var obj = { a: 10, b: 20 };
//var arr = [5, 'x', true];
var obj = new Object();
obj.a = 10;
obj.b = 20;
var arr = new Array();
arr[0] = 5;
arr[1] = 'x';
arr[2] = true;

而其中的 Object 和 Array 都是函数:

1
2
console.log(typeof (Object)); // function
console.log(typeof (Array)); // function

所以,可以很负责任的说—— 对象都是通过函数来创建的 。

阅读全文 »

深入理解javascript原型和闭包(1)--一切都是对象

发表于 2017-04-16 | 分类于 JavaScript , 王福朋-深入理解javascript原型和闭包系列
原文地址深入理解javascript原型和闭包(1)——一切都是对象
“一切都是对象”这句话的重点在于如何去理解“对象”这个概念。

——当然,也不是所有的都是对象,值类型就不是对象。

首先咱们还是先看看javascript中一个常用的一元操作符——typeof。typeof应该算是咱们的老朋友,还有谁没用过它?

注释:原文中描述的typeof是一个函数,其实tyepof是一个一元操作符,原作者已经知晓,暂时未在文章中修改

typeof函数输出的一共有几种类型,在此列出:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function show(x) {
console.log(typeof(x)); // undefined
console.log(typeof(10)); // number
console.log(typeof('abc')); // string
console.log(typeof(true)); // boolean
console.log(typeof(function () { })); //function
console.log(typeof([1, 'a', true])); //object
console.log(typeof ({ a: 10, b: 20 })); //object
console.log(typeof (null)); //object
console.log(typeof (new Number(10))); //object
}
show();

阅读全文 »

Hello World

发表于 2017-04-15 | 分类于 Hello World

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

12
郭景峰

郭景峰

将写bug进行到底

18 日志
5 分类
5 标签
GitHub NeteaseCloudMusic
© 2018 郭景峰
由 Hexo 强力驱动
主题 - NexT.Muse