简单粗暴地理解,详解面向对象

聊聊 CSS3 中的 object-fit 和 object-position

2016/11/22 · CSS · CSS3

本文作者: 伯乐在线 - TGCode 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

最近一直忙于将JavaScript学习的笔记整理成电子书,也没什么空闲时间写新的文章。趁着今天有点空闲,决定再来折腾一下CSS3中的两个属性:object-fitobject-position

这两个奇葩的属性是做什么的呢?其实它们是为了处理替换元素(replaced elements)的自适应问题,简单的说,就是处理替换元素的变形(这里指长宽比例变形)问题。

等等,好像多了一个名词,啥叫替换元素?替换元素其实是:

  • 其内容不受CSS视觉格式化模型控制的元素,比如image,嵌入的文档(iframe之类)或者applet,叫做替换元素。比:img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸:一个固有的宽度,一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度,从而也有固有的宽高比率。另一方面,其他文档也可能没有固有的尺寸,比如一个空白的html文档。
  • CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。object,video,textarea,input也是替换元素,audio和canvas在某些特定情形下为替换元素。使用CSS的content属性插入的对象是匿名替换元素。

这个当然不是我头脑风暴来的,而是引用别人的解释:引用

常见的替换元素有<video>、<object>、<img>、<input type=”image”>、<svg>、<svg:image>和<svg:video>等。

要是看的稀里糊涂的也没关系,接着往下看,我相信你会懂得!

1、object-fit

语法:

object-fit: fill | contian | cover | none | scale-down;

1
object-fit: fill | contian | cover | none | scale-down;
  • fill : 默认值。填充,可替换元素填满整个内容区域,可能会改变长宽比,导致拉伸。
  • contain : 包含,保持原始的尺寸比例,保证可替换元素完整显示,宽度或高度至少有一个和内容区域的宽度或高度一致,部分内容会空白。
  • cover : 覆盖,保持原始的尺寸比例,保证内容区域被填满。因此,可替换元素可能会被切掉一部分,从而不能完整展示。
  • none : 保持可替换元素原尺寸和比例。
  • scale-down : 等比缩小。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

不好意思,我又要摆妹子来诱惑你们了,看效果图:

图片 1

上面的五个例子的代码:

<style> .box{ position:relative; float:left; margin:0 10px 40px 10px; width:150px; height:150px; } .box>img{ width:100%; height:100%; background-color:#000; } .fill{ object-fit:fill; } .contain{ object-fit:contain; } .cover{ object-fit:cover; } .none{ object-fit:none; } .scale{ object-fit:scale-down; } </style> <div class="box"> <img src="example-girl.jpg" class="fill" alt=""> </div> <div class="box"> <img src="example-girl.jpg" class="contain" alt=""> </div> <div class="box"> <img src="example-girl.jpg" class="cover" alt=""> </div> <div class="box"> <img src="example-girl.jpg" class="none" alt=""> </div> <div class="box"> <img src="example-girl.jpg" class="scale" alt=""> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<style>
.box{  
  position:relative;  
  float:left;  
  margin:0 10px 40px 10px;  
  width:150px;  
  height:150px;  
}  
.box>img{  
  width:100%;  
  height:100%;  
  background-color:#000;  
}  
.fill{  
  object-fit:fill;  
}  
.contain{  
  object-fit:contain;  
}  
.cover{    
  object-fit:cover;  
}  
.none{  
  object-fit:none;  
}  
.scale{  
  object-fit:scale-down;  
}  
</style>
 
<div class="box">  
  <img src="example-girl.jpg" class="fill" alt="">  
</div>  
<div class="box">  
  <img src="example-girl.jpg" class="contain" alt="">
</div>  
<div class="box">  
  <img src="example-girl.jpg" class="cover" alt="">
</div>  
<div class="box">  
  <img src="example-girl.jpg" class="none" alt="">
</div>  
<div class="box">  
  <img src="example-girl.jpg" class="scale" alt="">
</div>

看到这些效果,我想同志们最关心的的应该是兼容性,点这里点这里

2、object-position

object-position属性决定了它的盒子里面替换元素的对齐方式。

语法:

object-position: <position>

1
object-position: <position>

默认值是50% 50%,也就是居中效果,其取值和CSS中background-position属性取值一样。(如果不熟悉background-position,可以瞄瞄这里《CSS3 Background》)

例如:替换元素位于内容区域的左上角

img{ object-fit: contain; object-position: 0 0; }

1
2
3
4
img{
  object-fit: contain;
  object-position: 0 0;
}

效果图:

图片 2

例如:替换元素相对于左下角10px 10px地方定位

img{   object-fit: contain;   object-position: bottom 10px left 10px; }

1
2
3
4
img{
  object-fit: contain;
  object-position: bottom 10px left 10px;
}

效果图:

图片 3

当然,你也可以使用calc()来定位:

img{   object-fit: contain;   object-position: calc(100% - 10px) calc(100% - 10px); }

1
2
3
4
img{
  object-fit: contain;
  object-position: calc(100% - 10px) calc(100% - 10px);
}

效果图:

图片 4

它还支持负数:

img{   object-fit: contain;   object-position: -10px calc(100% - 10px); }

1
2
3
4
img{
  object-fit: contain;
  object-position: -10px calc(100% - 10px);
}

效果图:

图片 5

总之,object-position的特性表现与backgound-position一样一样的。

兼容性:点这里

到这里,这两个属性算是讲完了,就是这么简单。

打赏支持我写出更多好文章,谢谢!

打赏作者

简单粗暴地理解 JS 原型链

2016/05/07 · JavaScript · 1 评论 · 原型链

原文出处: 茄果   

原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好。

不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么。简单粗暴点看原型链吧,想点与代码无关的事,比如人、妖以及人妖。

1)人是人他妈生的,妖是妖他妈生的。人和妖都是对象实例,而人他妈和妖他妈就是原型。原型也是对象,叫原型对象。

图片 6

2)人他妈和人他爸啪啪啪能生出一堆人宝宝、妖他妈和妖他爸啪啪啪能生出一堆妖宝宝,啪啪啪就是构造函数,俗称造人。

图片 7

3)人他妈会记录啪啪啪的信息,所以可以通过人他妈找到啪啪啪的信息,也就是说能通过原型对象找到构造函数。

4)人他妈可以生很多宝宝,但这些宝宝只有一个妈妈,这就是原型的唯一性。

5)人他妈也是由人他妈他妈生的,通过人他妈找到人他妈他妈,再通过人他妈他妈找到人他妈他妈……,这个关系叫做原型链。

图片 8

6)原型链并不是无限的,当你通过人他妈一直往上找,最后发现你会发现人他妈他妈他妈……的他妈都不是人,也就是原型链最终指向null。

7)人他妈生的人会有人的样子,妖他妈生的妖会有妖的丑陋,这叫继承。

图片 9

8)你继承了你妈的肤色,你妈继承了你妈他妈的肤色,你妈他妈……,这就是原型链的继承。

9)你谈对象了,她妈让你带上房产证去提货,你若没有,那她妈会问你妈有没有,你妈没有那她妈会问你妈她妈有没有……这就是原型链的向上搜索。

10)你会继承你妈的样子,但是你也可以去染发洗剪吹,就是说对象的属性可以自定义,会覆盖继承得到的属性。

图片 10

11)虽然你洗剪吹了染成黄毛了,但你不能改变你妈的样子,你妈生的弟弟妹妹跟你的黄毛洗剪吹没一点关系,就是说对象实例不能改动原型的属性。

12)但是你家被你玩火烧了的话,那就是说你家你妈家你弟们家都被烧了,这就是原型属性的共享。

13)你妈外号阿珍,邻居大娘都叫你阿珍儿,但你妈头发从飘柔做成了金毛狮王后,隔壁大婶都改口叫你包租仔,这叫原型的动态性。

图片 11

14)你妈爱美,又跑到韩国整形,整到你妈他妈都认不出来,即使你妈头发换回飘柔了,但隔壁邻居还是叫你金毛狮王子。因为没人认出你妈,整形后的你妈已经回炉再造了,这就是原型的整体重写。

图片 12

尼玛!你特么也是够了! Don’t BB! Show me the code!

function Person (name) { this.name = name; } function Mother () { } Mother.prototype = { //Mother的原型 age: 18, home: ['Beijing', 'Shanghai'] }; Person.prototype = new Mother(); //Person的原型为Mother //用chrome调试工具查看,提供了__proto__接口查看原型,这里有两层原型,各位还是直接看chrome好一点。 var p1 = new Person('Jack'); //p1:'Jack'; __proto__:{__proto__:18,['Beijing','Shanghai']} var p2 = new Person('Mark'); //p2:'Mark'; __proto__:{__proto__:18,['Beijing','Shanghai']} p1.age = 20; /* 实例不能改变原型的基本值属性,正如你洗剪吹染黄毛跟你妈无关 * 在p1实例下增加一个age属性的普通操作,与原型无关。跟var o={}; o.age=20一样。 * p1:下面多了个属性age,而__proto__跟 Mother.prototype一样,age=18。 * p2:只有属性name,__proto__跟 Mother.prototype一样 */ p1.home[0] = 'Shenzhen'; /* 原型中引用类型属性的共享,正如你烧了你家,就是烧了你全家的家 * 这个先过,下文再仔细唠叨一下可好? * p1:'Jack',20; __proto__:{__proto__:18,['Shenzhen','Shanghai']} * p2:'Mark'; __proto__:{__proto__:18,['Shenzhen','Shanghai']} */ p1.home = ['Hangzhou', 'Guangzhou']; /* 其实跟p1.age=20一样的操作。换成这个理解: var o={}; o.home=['big','house'] * p1:'Jack',20,['Hangzhou','Guangzhou']; __proto__:{__proto__:18,['Shenzhen','Shanghai']} * p2:'Mark'; __proto__:{__proto__:18,['Shenzhen','Shanghai']} */ delete p1.age; /* 删除实例的属性之后,原本被覆盖的原型值就重见天日了。正如你剃了光头,遗传的迷人小卷发就长出来了。 * 这就是向上搜索机制,先搜你,然后你妈,再你妈他妈,所以你妈的改动会动态影响你。 * p1:'Jack',['Hangzhou','Guangzhou']; __proto__:{__proto__:18,['Shenzhen','Shanghai']} * p2:'Mark'; __proto__:{__proto__:18,['Shenzhen','Shanghai']} */ Person.prototype.lastName = 'Jin'; /* 改写原型,动态反应到实例中。正如你妈变新潮了,邻居提起你都说你妈真潮。 * 注意,这里我们改写的是Person的原型,就是往Mother里加一个lastName属性,等同于Mother.lastName='Jin' * 这里并不是改Mother.prototype,改动不同的层次,效果往往会有很大的差异。 * p1:'Jack',['Hangzhou','Guangzhou']; __proto__:{'jin',__proto__:18,['Shenzhen','Shanghai']} * p2:'Mark'; __proto__:{'jin',__proto__:18,['Shenzhen','Shanghai']} */ Person.prototype = { age: 28, address: { country: 'USA', city: 'Washington' } }; var p3 = new Person('Obama'); /* 重写原型!这个时候Person的原型已经完全变成一个新的对象了,也就是说Person换了个妈,叫后妈。 * 换成这样理解:var a=10; b=a; a=20; c=a。所以b不变,变得是c,所以p3跟着后妈变化,与亲妈无关。 * p1:'Jack',['Hangzhou','Guangzhou']; __proto__:{'jin',__proto__:18,['Shenzhen','Shanghai']} * p2:'Mark'; __proto__:{'jin',__proto__:18,['Shenzhen','Shanghai']} * p3:'Obama';__proto__: 28 {country: 'USA', city: 'Washington'} */ Mother.prototype.no = 9527; /* 改写原型的原型,动态反应到实例中。正如你妈他妈变新潮了,邻居提起你都说你丫外婆真潮。 * 注意,这里我们改写的是Mother.prototype,p1p2会变,但上面p3跟亲妈已经了无瓜葛了,不影响他。 * p1:'Jack',['Hangzhou','Guangzhou']; __proto__:{'jin',__proto__:18,['Shenzhen','Shanghai'],9527} * p2:'Mark'; __proto__:{'jin',__proto__:18,['Shenzhen','Shanghai'],9527} * p3:'Obama';__proto__: 28 {country: 'USA', city: 'Washington'} */ Mother.prototype = { car: 2, hobby: ['run','walk'] }; var p4 = new Person('Tony'); /* 重写原型的原型!这个时候Mother的原型已经完全变成一个新的对象了!人他妈换了个后妈! * 由于上面Person与Mother已经断开联系了,这时候Mother怎么变已经不影响Person了。 * p4:'Tony';__proto__: 28 {country: 'USA', city: 'Washington'} */ Person.prototype = new Mother(); //再次绑定 var p5 = new Person('Luffy'); // 这个时候如果需要应用这些改动的话,那就要重新将Person的原型绑到mother上了 // p5:'Luffy';__proto__:{__proto__: 2, ['run','walk']} p1.__proto__.__proto__.__proto__.__proto__ //null,你说原型链的终点不是null? Mother.__proto__.__proto__.__proto__ //null,你说原型链的终点不是null?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
function Person (name) { this.name = name; }
function Mother () { }
Mother.prototype = {    //Mother的原型
    age: 18,
    home: ['Beijing', 'Shanghai']
};
Person.prototype = new Mother(); //Person的原型为Mother
 
//用chrome调试工具查看,提供了__proto__接口查看原型,这里有两层原型,各位还是直接看chrome好一点。
var p1 = new Person('Jack'); //p1:'Jack'; __proto__:{__proto__:18,['Beijing','Shanghai']}
var p2 = new Person('Mark'); //p2:'Mark'; __proto__:{__proto__:18,['Beijing','Shanghai']}
 
p1.age = 20;  
/* 实例不能改变原型的基本值属性,正如你洗剪吹染黄毛跟你妈无关
* 在p1实例下增加一个age属性的普通操作,与原型无关。跟var o={}; o.age=20一样。
* p1:下面多了个属性age,而__proto__跟 Mother.prototype一样,age=18。
* p2:只有属性name,__proto__跟 Mother.prototype一样
*/
 
p1.home[0] = 'Shenzhen';
/* 原型中引用类型属性的共享,正如你烧了你家,就是烧了你全家的家
* 这个先过,下文再仔细唠叨一下可好?
* p1:'Jack',20; __proto__:{__proto__:18,['Shenzhen','Shanghai']}
* p2:'Mark';    __proto__:{__proto__:18,['Shenzhen','Shanghai']}
*/
 
p1.home = ['Hangzhou', 'Guangzhou'];
/* 其实跟p1.age=20一样的操作。换成这个理解: var o={}; o.home=['big','house']
* p1:'Jack',20,['Hangzhou','Guangzhou']; __proto__:{__proto__:18,['Shenzhen','Shanghai']}
* p2:'Mark';                             __proto__:{__proto__:18,['Shenzhen','Shanghai']}
*/
 
delete p1.age;    
/* 删除实例的属性之后,原本被覆盖的原型值就重见天日了。正如你剃了光头,遗传的迷人小卷发就长出来了。
* 这就是向上搜索机制,先搜你,然后你妈,再你妈他妈,所以你妈的改动会动态影响你。
* p1:'Jack',['Hangzhou','Guangzhou']; __proto__:{__proto__:18,['Shenzhen','Shanghai']}
* p2:'Mark';                          __proto__:{__proto__:18,['Shenzhen','Shanghai']}
*/
 
 
Person.prototype.lastName = 'Jin';
/* 改写原型,动态反应到实例中。正如你妈变新潮了,邻居提起你都说你妈真潮。
* 注意,这里我们改写的是Person的原型,就是往Mother里加一个lastName属性,等同于Mother.lastName='Jin'
* 这里并不是改Mother.prototype,改动不同的层次,效果往往会有很大的差异。
* p1:'Jack',['Hangzhou','Guangzhou']; __proto__:{'jin',__proto__:18,['Shenzhen','Shanghai']}
* p2:'Mark';                          __proto__:{'jin',__proto__:18,['Shenzhen','Shanghai']}
*/
 
Person.prototype = {
    age: 28,
    address: { country: 'USA', city: 'Washington' }
};
var p3 = new Person('Obama');
/* 重写原型!这个时候Person的原型已经完全变成一个新的对象了,也就是说Person换了个妈,叫后妈。
* 换成这样理解:var a=10; b=a; a=20; c=a。所以b不变,变得是c,所以p3跟着后妈变化,与亲妈无关。
* p1:'Jack',['Hangzhou','Guangzhou']; __proto__:{'jin',__proto__:18,['Shenzhen','Shanghai']}
* p2:'Mark';                          __proto__:{'jin',__proto__:18,['Shenzhen','Shanghai']}
* p3:'Obama';__proto__: 28 {country: 'USA', city: 'Washington'}
*/
 
 
Mother.prototype.no = 9527;
/* 改写原型的原型,动态反应到实例中。正如你妈他妈变新潮了,邻居提起你都说你丫外婆真潮。
* 注意,这里我们改写的是Mother.prototype,p1p2会变,但上面p3跟亲妈已经了无瓜葛了,不影响他。
* p1:'Jack',['Hangzhou','Guangzhou']; __proto__:{'jin',__proto__:18,['Shenzhen','Shanghai'],9527}
* p2:'Mark';                          __proto__:{'jin',__proto__:18,['Shenzhen','Shanghai'],9527}
* p3:'Obama';__proto__: 28 {country: 'USA', city: 'Washington'}
*/
 
Mother.prototype = {
    car: 2,
    hobby: ['run','walk']
};
var p4 = new Person('Tony');
/* 重写原型的原型!这个时候Mother的原型已经完全变成一个新的对象了!人他妈换了个后妈!
* 由于上面Person与Mother已经断开联系了,这时候Mother怎么变已经不影响Person了。
* p4:'Tony';__proto__: 28 {country: 'USA', city: 'Washington'}
*/
Person.prototype = new Mother(); //再次绑定
var p5 = new Person('Luffy');
// 这个时候如果需要应用这些改动的话,那就要重新将Person的原型绑到mother上了
// p5:'Luffy';__proto__:{__proto__: 2, ['run','walk']}
 
p1.__proto__.__proto__.__proto__.__proto__ //null,你说原型链的终点不是null?
Mother.__proto__.__proto__.__proto__    //null,你说原型链的终点不是null?

看完基本能理解了吧?

现在再来说说 p1.age = 20、p1.home = [‘Hangzhou’, ‘Guangzhou’] 和  p1.home[0] = ‘Shenzhen’ 的区别。 p1.home[0] = ‘Shenzhen’;  总结一下是 p1.object.method,p1.object.property 这样的形式。

p1.age = 20;  p1.home = [‘Hangzhou’, ‘Guangzhou’];这两句还是比较好理解的,先忘掉原型吧,想想我们是怎么为一个普通对象增加属性的:

var obj = new Object(); obj.name='xxx'; obj.num = [100, 200];

1
2
3
var obj = new Object();
obj.name='xxx';
obj.num = [100, 200];

这样是不是就理解了呢?一样一样的呀。

那为什么 p1.home[0] = ‘Shenzhen’ 不会在 p1 下创建一个 home 数组属性,然后将其首位设为 ‘Shenzhen’呢? 我们还是先忘了这个,想想上面的obj对象,如果写成这样: var obj.name = ‘xxx’, obj.num = [100, 200],能得到你要的结果吗? 显然,除了报错你什么都得不到。因为obj还未定义,又怎么能往里面加入东西呢?同理,p1.home[0]中的 home 在 p1 下并未被定义,所以也不能直接一步定义 home[0] 了。如果要在p1下创建一个 home 数组,当然是这么写了:

p1.home = []; p1.home[0] = 'Shenzhen';

1
2
p1.home = [];
p1.home[0] = 'Shenzhen';

这不就是我们最常用的办法吗?

而之所以 p1.home[0] = ‘Shenzhen’ 不直接报错,是因为在原型链中有一个搜索机制。当我们输入 p1.object 的时候,原型链的搜索机制是先在实例中搜索相应的值,找不到就在原型中找,还找不到就再往上一级原型中搜索……一直到了原型链的终点,就是到null还没找到的话,就返回一个 undefined。当我们输入 p1.home[0] 的时候,也是同样的搜索机制,先搜索 p1 看有没有名为 home 的属性和方法,然后逐级向上查找。最后我们在Mother的原型里面找到了,所以修改他就相当于修改了 Mother 的原型啊。

一句话概括:p1.home[0] = ‘Shenzhen’  等同于  Mother.prototype.home[0] = ‘Shenzhen’。

由上面的分析可以知道,原型链继承的主要问题在于属性的共享,很多时候我们只想共享方法而并不想要共享属性,理想中每个实例应该有独立的属性。因此,原型继承就有了下面的两种改良方式:

前端基础进阶(9):详解面向对象、构造函数、原型与原型链

2017/04/02 · JavaScript · 1 评论 · 原型, 原型链, 构造函数, 面向对象

原文出处: 波同学   

图片 13

.

如果要我总结一下学习前端以来我遇到了哪些瓶颈,那么面向对象一定是第一个毫不犹豫想到的。尽管我现在对于面向对象有了一些的了解,但是当初的那种似懂非懂的痛苦,依然历历在目。

为了帮助大家能够更加直观的学习和了解面向对象,我会用尽量简单易懂的描述来展示面向对象的相关知识。并且也准备了一些实用的例子帮助大家更加快速的掌握面向对象的真谛。

  • jQuery的面向对象实现
  • 封装拖拽
  • 简易版运动框架封装

这可能会花一点时间,但是却值得期待。所以如果有兴趣的朋友可以来简书和公众号关注我。

而这篇文章主要来聊一聊关于面向对象的一些重要的基本功。

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 14 图片 15

1 赞 收藏 评论

1)组合继承

function Mother (age) { this.age = age; this.hobby = ['running','football'] } Mother.prototype.showAge = function () { console.log(this.age); }; function Person (name, age) { Mother.call(this, age);  //第二次执行 this.name = name; } Person.prototype = new Mother();  //第一次执行 Person.prototype.constructor = Person; Person.prototype.showName = function () { console.log(this.name); } var p1 = new Person('Jack', 20); p1.hobby.push('basketball'); //p1:'Jack'; __proto__:20,['running','football'] var p2 = new Person('Mark', 18); //p2:'Mark'; __proto__:18,['running','football']

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function Mother (age) {
    this.age = age;
    this.hobby = ['running','football']
}
Mother.prototype.showAge = function () {
    console.log(this.age);
};
 
function Person (name, age) {
    Mother.call(this, age);  //第二次执行
    this.name = name;
}
Person.prototype = new Mother();  //第一次执行
Person.prototype.constructor = Person;
Person.prototype.showName = function () {
    console.log(this.name);
}
 
var p1 = new Person('Jack', 20);
p1.hobby.push('basketball');  //p1:'Jack'; __proto__:20,['running','football']
var p2 = new Person('Mark', 18);  //p2:'Mark'; __proto__:18,['running','football']

结果是酱紫的:

图片 16  图片 17

这里第一次执行的时候,得到 Person.prototype.age = undefined, Person.prototype.hobby = [‘running’,’football’],第二次执行也就是 var p1 = new Person(‘Jack’, 20) 的时候,得到 p1.age =20, p1.hobby = [‘running’,’football’],push后就变成了 p1.hobby = [‘running’,’football’, ‘basketball’]。其实分辨好 this 的变化,理解起来也是比较简单的,把 this 简单替换一下就能得到这个结果了。 如果感觉理解起来比较绕的话,试着把脑子里面的概念扔掉吧,把自己当浏览器从上到下执行一遍代码,结果是不是就出来了呢?

通过第二次执行原型的构造函数 Mother(),我们在对象实例中复制了一份原型的属性,这样就做到了与原型属性的分离独立。细心的你会发现,我们第一次调用 Mother(),好像什么用都没有呢,能不调用他吗?可以,就有了下面的寄生组合式继承。

一、对象的定义

在ECMAScript-262中,对象被定义为“无序属性的集合,其属性可以包含基本值,对象或者函数”

也就是说,在JavaScript中,对象无非就是由一些列无序的key-value对组成。其中value可以是基本值,对象或者函数。

// 这里的person就是一个对象 var person = { name: 'Tom', age: 18, getName: function() {}, parent: {} }

1
2
3
4
5
6
7
// 这里的person就是一个对象
var person = {
    name: 'Tom',
    age: 18,
    getName: function() {},
    parent: {}
}

创建对象

我们可以通过new的方式创建一个对象。

var obj = new Object();

1
var obj = new Object();

也可以通过对象字面量的形式创建一个简单的对象。

var obj = {};

1
var obj = {};

当我们想要给我们创建的简单对象添加方法时,可以这样表示。

// 可以这样 var person = {}; person.name = "TOM"; person.getName = function() { return this.name; } // 也可以这样 var person = { name: "TOM", getName: function() { return this.name; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 可以这样
var person = {};
person.name = "TOM";
person.getName = function() {
    return this.name;
}
 
// 也可以这样
var person = {
    name: "TOM",
    getName: function() {
        return this.name;
    }
}

访问对象的属性和方法

假如我们有一个简单的对象如下:

var person = { name: 'TOM', age: '20', getName: function() { return this.name } }

1
2
3
4
5
6
7
var person = {
    name: 'TOM',
    age: '20',
    getName: function() {
        return this.name
    }
}

当我们想要访问他的name属性时,可以用如下两种方式访问。

person.name // 或者 person['name']

1
2
3
4
person.name
 
// 或者
person['name']

如果我们想要访问的属性名是一个变量时,常常会使用第二种方式。例如我们要同时访问person的name与age,可以这样写:

['name', 'age'].forEach(function(item) { console.log(person[item]); })

1
2
3
['name', 'age'].forEach(function(item) {
    console.log(person[item]);
})

这种方式一定要重视,记住它以后在我们处理复杂数据的时候会有很大的帮助。

关于作者:TGCode

图片 18

路途虽远,无所畏 个人主页 · 我的文章 · 9 ·    

图片 19

2)寄生组合式继承

function object(o){ function F(){} F.prototype = o; return new F(); } function inheritPrototype(Person, Mother){ var prototype = object(Mother.prototype); prototype.constructor = Person; Person.prototype = prototype; } function Mother (age) { this.age = age; this.hobby = ['running','football'] } Mother.prototype.showAge = function () { console.log(this.age); }; function Person (name, age) { Mother.call(this, age); this.name = name; } inheritPrototype(Person, Mother); Person.prototype.showName = function () { console.log(this.name); } var p1 = new Person('Jack', 20); p1.hobby.push('basketball');//p1:'Jack'; __proto__:20,['running','football'] var p2 = new Person('Mark', 18); //p2:'Mark'; __proto__:18,['running','football']

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}
 
function inheritPrototype(Person, Mother){
    var prototype = object(Mother.prototype);
    prototype.constructor = Person;    
    Person.prototype = prototype;    
}
                        
function Mother (age) {
    this.age = age;
    this.hobby = ['running','football']
}
Mother.prototype.showAge = function () {
    console.log(this.age);
};
 
function Person (name, age) {
    Mother.call(this, age);
    this.name = name;
}
 
inheritPrototype(Person, Mother);
 
Person.prototype.showName = function () {
    console.log(this.name);
}
 
var p1 = new Person('Jack', 20);
p1.hobby.push('basketball');//p1:'Jack'; __proto__:20,['running','football']
var p2 = new Person('Mark', 18); //p2:'Mark'; __proto__:18,['running','football']

结果是酱紫的:

图片 20 图片 21

原型中不再有 age 和 hobby 属性了,只有两个方法,正是我们想要的结果!

关键点在于 object(o) 里面,这里借用了一个临时对象来巧妙避免了调用new Mother(),然后将原型为 o 的新对象实例返回,从而完成了原型链的设置。很绕,对吧,那是因为我们不能直接设置 Person.prototype = Mother.prototype 啊。

二、工厂模式

使用上面的方式创建对象很简单,但是在很多时候并不能满足我们的需求。就以person对象为例。假如我们在实际开发中,不仅仅需要一个名字叫做TOM的person对象,同时还需要另外一个名为Jake的person对象,虽然他们有很多相似之处,但是我们不得不重复写两次。

var perTom = { name: 'TOM', age: 20, getName: function() { return this.name } }; var perJake = { name: 'Jake', age: 22, getName: function() { return this.name } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var perTom = {
    name: 'TOM',
    age: 20,
    getName: function() {
        return this.name
    }
};
 
var perJake = {
    name: 'Jake',
    age: 22,
    getName: function() {
        return this.name
    }
}

很显然这并不是合理的方式,当相似对象太多时,大家都会崩溃掉。

我们可以使用工厂模式的方式解决这个问题。顾名思义,工厂模式就是我们提供一个模子,然后通过这个模子复制出我们需要的对象。我们需要多少个,就复制多少个。

var createPerson = function(name, age) { // 声明一个中间对象,该对象就是工厂模式的模子 var o = new Object(); // 依次添加我们需要的属性与方法 o.name = name; o.age = age; o.getName = function() { return this.name; } return o; } // 创建两个实例 var perTom = createPerson('TOM', 20); var PerJake = createPerson('Jake', 22);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var createPerson = function(name, age) {
 
    // 声明一个中间对象,该对象就是工厂模式的模子
    var o = new Object();
 
    // 依次添加我们需要的属性与方法
    o.name = name;
    o.age = age;
    o.getName = function() {
        return this.name;
    }
 
    return o;
}
 
// 创建两个实例
var perTom = createPerson('TOM', 20);
var PerJake = createPerson('Jake', 22);

相信上面的代码并不难理解,也不用把工厂模式看得太过高大上。很显然,工厂模式帮助我们解决了重复代码上的麻烦,让我们可以写很少的代码,就能够创建很多个person对象。但是这里还有两个麻烦,需要我们注意。

第一个麻烦就是这样处理,我们没有办法识别对象实例的类型。使用instanceof可以识别对象的类型,如下例子:

var obj = {}; var foo = function() {} console.log(obj instanceof Object); // true console.log(foo instanceof Function); // true

1
2
3
4
5
var obj = {};
var foo = function() {}
 
console.log(obj instanceof Object);  // true
console.log(foo instanceof Function); // true

因此在工厂模式的基础上,我们需要使用构造函数的方式来解决这个麻烦。

本文由澳门新葡亰平台官网发布于web前端,转载请注明出处:简单粗暴地理解,详解面向对象

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。