JavaScript-第四章

、什么是面向对象?

面向对象仅仅是一个概念或者编程思想

通过一种叫做原型的方式来实现面向对象编程

1、创建对象(自定义对象,内置对象)

基于Object对象的方式创建对象-自定义对象

示例:

var 对象名称=new Object( );

var flower=new Object();

flower.name="长春花";

flower.genera="夹竹桃科长春花属";

flower.area="非洲、亚热带、热带以及中国大陆的华东、西南、中南等地";

flower.uses="观赏或用药等";

flower.showName=function(){ alert(this.name); }

flower.showName();

常见的内置对象

String（字符串）对象

Date（日期）对象

Array（数组）对象

Boolean（逻辑）对象

Math（算数）对象

RegExp对象

二、

如何解决使用同一个接口不需要创建很多对象，减少产生大量的重复代码？

1、构造函数:

function Flower(name,genera,area,uses){

this.name=name;

…….

this.showName=function(){

alert(this.name);

}

var flower1=new Flower("长春花","夹竹桃科长春花属","非洲、亚热带、热带以及中国大陆的华东、西南、中南等地","观赏或用药等")

flower1.showName();

2、原型对象:

function Flower(){

}

Flower.prototype.name="曼陀罗花";

Flower.prototype.genera="茄科曼陀罗属";

Flower.prototype.area="印度、中国北部";

Flower.prototype.uses="观赏或药用";

Flower.prototype.showName=function() {

alert(this.name);

}

var flower1=new Flower();

flower1.showName();

var flower2=new Flower();

flower2.showName();

alert(flower1.showName==flower2.showName);

三、继承

1.原型链:一个原型对象是另一个原型对象的实例

相关的原型对象层层递进，就构成了实例与原型的链条，就是原型链

示例:

function Humans(){

this.foot=2;

}

Humans.prototype.getFoot=function(){

return this.foot;

}

function Man(){

this.head=1;

}

Man.prototype=new Humans(); //继承了Humans

Man.prototype.getHead=function(){

return this.head;

}

var man1=new Man();

alert(man1.getFoot()); //2

alert(man1 instanceof Object); //true

alert(man1 instanceof Humans); //true

alert(man1 instanceof Man); //true

2.对象继承:

function Humans(){

this.clothing=["trousers","dress","jacket"];

}

function Man(){ }

//继承了Humans

Man.prototype=new Humans();

var man1=new Man();

man1.clothing.push("coat");

alert(man1.clothing);

var man2=new Man();

alert(man2.clothing);

3.组合继承:

组合继承：有时也叫做伪经典继承

将原型链和借用构造函数的技术组合到一块，发挥二者之长的一种继承模式

使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承

四、这一章的示例代码:

<html>

<head>

<title>面向对象标题栏替换和修改</title>

</head>

<style>

* {

margin: 0;

padding: 0;

}

ul li {

list-style: none;

}

main {

width: 960px;

height: 500px;

border-radius: 10px;

margin: 50px auto;

}

main h4 {

height: 100px;

line-height: 100px;

text-align: center;

}

.tabsbox {

width: 900px;

margin: 0 auto;

height: 400px;

border: 1px solid lightsalmon;

position: relative;

}

nav ul {

overflow: hidden;

}

nav ul li {

float: left;

width: 100px;

height: 50px;

line-height: 50px;

text-align: center;

border-right: 1px solid #ccc;

position: relative;

}

nav ul li.liactive {

border-bottom: 2px solid #fff;

z-index: 9;

}

#tab input {

width: 80%;

height: 60%;

}

nav ul li span:last-child {

position: absolute;

user-select: none;

font-size: 12px;

top: -18px;

right: 0;

display: inline-block;

height: 20px;

}

.tabadd {

position: absolute;

/* width: 100px; */

top: 0;

right: 0;

}

.tabadd span {

display: block;

width: 20px;

height: 20px;

line-height: 20px;

text-align: center;

border: 1px solid #ccc;

float: right;

margin: 10px;

user-select: none;

}

.tabscon {

width: 100%;

height: 300px;

position: absolute;

padding: 30px;

top: 50px;

left: 0px;

box-sizing: border-box;

border-top: 1px solid #ccc;

}

.tabscon section,

.tabscon section.conactive {

display: none;

width: 100%;

height: 100%;

}

.tabscon section.conactive {

display: block;

}

</style>

<body>

<main>

<h4>

JS面向对象动态添加标签页

</h4>

<ul>

</ul>

</div>

</nav>

</div>

</main>

</body>

var that;

class Tab {

constructor(id) {

// 获取元素

that = this;

this.main = document.querySelector(id);

this.add = this.main.querySelector('.tabadd');

// li的父元素

this.ul = this.main.querySelector('.fisrstnav ul:first-child');

// section 父元素

this.fsection = this.main.querySelector('.tabscon');

this.init();

}

init() {

this.updateNode();

// init 初始化操作让相关的元素绑定事件

this.add.onclick = this.addTab;

for (var i = 0; i < this.lis.length; i++) {

this.lis[i].index = i;

this.lis[i].onclick = this.toggleTab;

this.remove[i].onclick = this.removeTab;

this.spans[i].ondblclick = this.editTab;

this.sections[i].ondblclick = this.editTab;

}

// 因为我们动态添加元素需要从新获取对应的元素

updateNode() {

this.lis = this.main.querySelectorAll('li');

this.sections = this.main.querySelectorAll('section');

this.remove = this.main.querySelectorAll('.icon-guanbi');

this.spans = this.main.querySelectorAll('.fisrstnav li span:first-child');

}

// 1. 切换功能

toggleTab() {

// console.log(this.index);

that.clearClass();

this.className = 'liactive';

that.sections[this.index].className = 'conactive';

}

// 清除所有li 和section 的类

clearClass() {

for (var i = 0; i < this.lis.length; i++) {

this.lis[i].className = '';

this.sections[i].className = '';

}

// 2. 添加功能

addTab() {

that.clearClass();

// (1) 创建li元素和section元素

var random = Math.random();

var li = '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>';

var section = '<section class="conactive">测试 ' + random + '</section>';

// (2) 把这两个元素追加到对应的父元素里面

that.ul.insertAdjacentHTML('beforeend', li);

that.fsection.insertAdjacentHTML('beforeend', section);

that.init();

}

// 3. 删除功能

removeTab(e) {

e.stopPropagation(); // 阻止冒泡防止触发li 的切换点击事件

var index = this.parentNode.index;

console.log(index);

// 根据索引号删除对应的li 和section remove()方法可以直接删除指定的元素

that.lis[index].remove();

that.sections[index].remove();

that.init();

// 当我们删除的不是选中状态的li 的时候,原来的选中状态li保持不变

if (document.querySelector('.liactive')) return;

// 当我们删除了选中状态的这个li 的时候, 让它的前一个li 处于选定状态

index--;

// 手动调用我们的点击事件不需要鼠标触发

that.lis[index] && that.lis[index].click();

}

// 4. 修改功能

editTab() {

var str = this.innerHTML;

// 双击禁止选定文字

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

// alert(11);

this.innerHTML = '<input type="text" />';

var input = this.children[0];

input.value = str;

input.select(); // 文本框里面的文字处于选定状态

// 当我们离开文本框就把文本框里面的值给span

input.onblur = function () {

this.parentNode.innerHTML = this.value;

};

// 按下回车也可以把文本框里面的值给span

input.onkeyup = function (e) {

if (e.keyCode === 13) {

// 手动调用表单失去焦点事件不需要鼠标离开操作

this.blur();

}

new Tab('#tab');

</script>

</html>

ava 内存模型中的 happen-before 是什么?

Happen-before 关系，是Java 内存模型中保证多线程可见性的机制，也是早期语言规范中含糊可见性概念的一个精确定义。

它的具体表现形式，包括但远不止 synchronized,volatile,lock 操作顺序等方面。

happen-before 原则

程序顺序规则：一个线程内执行的每个操作，都保证 happen-before 后面的操作，这样就保证了程序顺序规则，
volatile 变量规则：对于 volatile 变量，对他的写操作，保证 happen-before 在随后对改变量的读取操作。
监视器锁规则：对于一个锁的解锁操作，保证 happen-before 加锁操作。
线程启动 happen-before 规则：Thread 对象的 start() 方法先行于此线程的每一个动作
线程中断 happen-before 规则：对线程 interrupt() 方法的调用先行发生于被中断线程的代码检测到中断事件的发生。
线程终结规则：假定线程A在执行的过程中，通过制定ThreadB.join()等待线程B终止，那么线程B在终止之前对共享变量的修改在线程A等待返回后可见。
对象终结规则，一个对象的初始化完成happen-before 于 finalizer() 方法的开始
传递性：happen-before 存在传递性，a happen-before b ,b happen-before c ,那么 a happen-before c 。

happen-before 保障了顺序执行，也包括了内存读写的操作顺序。

happen-before 与 JMM 的关系

image

如何学习 Java 内存模型(JMM)

JMM 可以看作是深入理解Java并发编程、编译器和JM内部机制的必要条件，但这同时也是个容易让初学者无所适从的主题。

明确目的，建议不要一头扎进各种CPU体系结构，纠结于不同的缓存、流水线、执行单元等。这些东西虽然很酷，但其复杂性是超乎想象的，很可能会无谓增加学习难度，也未必有实践价值。
克制住对”秘籍"的诱惑。有些时候，某些编程方式看起來能起到特定效果，但分不清是实现差异导致的表现，还是"规范″要求的行为，就不要依赖于这种"表现"去编程，尽量遵循语言规范进行，这样我们的应用行为才能更加可靠、可预计。

JMM 可以解决什么问题？

简化多线程编程，保证程序可移植性

Java 是最早尝试提供内存模型的语言，可简化多线程编程，保障程序可移植。早期的 C/C++ 不存在内存模型的概念，依赖处理器本身的内存一致性模型。但是不同的处理器差异比较大，不能保证 C++ 程序在处理器A 可以运行，在处理器B 上也可以运行。

https://en.wikipedia.org/wiki/Memory_ordering

对指令重排序提供清晰的规范

过于范范的内存模型定义，有很多模棱两可之处，对 synchronized 或者 volatile 产生的指令重排序问题，如果没有清晰的规范，不能保证一些多线程程序的正确性。

所以，Java迫切需要一个完善的JMM，能够让普通Java开发者和编译器、JVM工程师，能够淸地达成共识。换句话说，可以相对简单并准确地判断岀，多线程程序什么样的执行序列是符合规范的。

JVM 开发者

对于编译器、JVM开发者，关注点可能是如何使用类似内存屏（ Memory-Barrier）之类技术，保证执行结果符合JMM的推断。

Java 应用工程师

对于Java应用开发者，则可能更加关注 volatile、 synchronized等语义，如何利用类{ happen- before的规则，写出可靠的多线程应用。

image

Java 内存模型的抽象定义

包含本地内存和主内存的定义

JMM 是怎么解决可见性的问题

image

JMM 内部是怎样实现 happen-before 原则的？

内存屏障
禁止重排序

以 volatile 变量为例：

对改变量的写操作之后，编译器插入一个写屏障
对改变量的读操作之前，编译器会插入一个读屏障

内存屏障能够在类似变量读、写操作之后，保证其他线程对 volatile变量的修改对当前线程可见，或者本地修改对其他线程提倛可见性。换句话说，线程写入，写屏障会通过类似强迫刷出处理器缓存的方式，让其他线程能够拿到最新数值。

如果你对更多内存屏障的细节感兴趣，或者想了解不同体系结构的处理器模型，建议参考JSR-133相关文档，我个人认为这些都是和特定硬件相关的，内存屏障之类只是实现JMM规范的技术手段，并不是规范的要求。

http://gee.cs.oswego.edu/dl/jmm/cookbook.html

class VolatileExample {
int  a = 0;
volatile boolean flag= false;
public void writer(){
   a=1;        // 1
   flag = true; //2
} 
public void reader(){
  if(flag){  //3
    int i = a ;//4
    ...
  }
}

假设线程A执行 writer方法之后，线程B执行 reader0方法。根据 happens-before规则，这个过程建立的 happens-before关系可以分为3类：

根据程序次序规则，1 happens-before2;3 happens-before4。
根据 volatile 规则，2 happens-before3
根据 happens-before的传递性规则，1 happens-before4。

上述 happens-before关系的图形化表现形式如下:

image

在上图中，每一个箭头链接的两个节点，代表了一个 happens-before关系。黑色箭头表示程序顺序规则；橙色箭头表示 volatile规则；蓝色箭头表示组合这些规则后提供的 happens-before保证。最终读取到的i 就是 1 。

image

线程A在写flag变量后，本地内存A中被线程A更新过的两个共享变量的值被刷新到主内存中。此时，本地内存A和主内存中的共享变量的值是一致的。

当读一个 volatile变量时，JMM会把该线程对应的本地内存置为无效。线程接下来将从主内存中读取共享变量。如图所示，在读flag变量后，本地内存B包含的值已经被置为无效。此时，线程B必须从主内存中读取共享变量。线程B的读取操作将导致本地内存B与主内存中的共享变量的值变成一致。

image

线程A写一个 volatile变量，实质上是线程A向接下来将要读这个 volatile变量的某个线程发出了（其对共享变量所做修改的）消息
线程B读一个 volatile变量，实质上是线程B接收了之前某个线程发出的（在写这个volatile变量之前对共享变量所做修改的）消息
线程A写一个 volatile变量，随后线程B读这个 volatile变量，这个过程实质上是线程A通过主内存向线程B发送消息。

有序性，原子性，可见性是线程安全的基本保障。

volatile 使用了内存屏障实现可见性

在每个 volatile写操作的前面插入一个Storestore屏障。
在每个 volatile写操作的后面插入一个Storeload屏障。
在每个 volatile读操作的后面插入一个Loadload屏障。
在每个 volatile读操作的后面插入一个Loadstore屏障。

image

我们经常会说 volatile b比synchronized之类更加轻量，但轻量也仅仅是相对的， volatile的读、写仍然要比普通的读写要开销更大，所以如果你是在性能高度敏感的场景，除非你确定需要它的语义，不然慎用。

程序员开发者社区

近因为一些网页的需要，需要比较深入的使用了CSS 的「伪元素」( Pseudo Element )，发现原来不只是用用before或after 而已，可以玩的东西还真是不少，所以就来篇文章，把这些比较不常玩的用法归纳整理下，希望对你的日常工作有所帮助。

什么是「伪元素」？

「伪元素」之所以称作「伪」，除了英文从「Pseudo」翻译过来之外，就是因为它并不是真正网页里的元素，但行为与表现又和真正网页元素一样，也可以对其使用CSS 操控。

跟伪元素类似的还有「伪类」( Pseudo classes )，在W3C的定义里总共有五个伪元素(其他仍在测试阶段)，分别是::before、::after、::first-line、::first-letter和::selection，为了和伪类区分，伪元素使用两个冒号「::」开头，而伪类使用一个冒号「:」开头(像是:hover、:target...等)。

虽然现在的浏览器就算写一个冒号也可以正常运作，不过为了方便区分，用两个冒号还是比较好的，而且不论浏览器是什么，::selection必须是两个冒号才能正常运作。

参考：MDN Pseudo-elements、伪类child和of-type

认识::before 与::after

::before、::after大概是最常使用的伪元素，两者都是以display:inline-block的属性存在，::before是在原本的元素「之前」加入内容，::after则是在原本的元素「之后」加入内容，同时伪元素也会「继承」原本元素的属性，如果原本文字是黑色，伪元素的文字也会是黑色。

举例来说，下面这段程式码，有一个div 内容是「大家好，我是div」，使用::before、::after 之后，会在原本div 的前后各添加一段文字，并且让这两段文字都呈现红色。

div::before{
 content:"我是 before";
 color:red;
}
div::after{
 content:"我是 after";
 color:red;
}

实用的content

上述的内容乍看之下很容易理解，比较需要注意的是一定要具备content的属性，就算是只有content:"";都可以，因为没有content的伪元素是不会出现在画面上的，然而content是个很特别的属性，它可以使用attr直接获取内容元素的属性值( attribute )，举例来说，在HTML里有一个超连结，点击后会弹出新视窗并连结至Google：

<a href="https://www.google.com" target="_blank">google</a>

使用下列的程式码用法，将会把超连结的href 内容与target 内容，透过伪元素一前一后的显示出来。

a::before{
 content: attr(href);
 color:red;
}
a::after{
 content: attr(target);
 color:green;
}

此外content内容是可以「相加」的，不过用法不像JavaScript使用+号来相连，而是直接用一个空白键就可以不断的累加下去，以下面的程式码来说，可以在刚刚撷取的超连结文字后方和target属性前方，加入标点符号。

a::before{
 content: "( " attr(href) " ) < ";
 color:red;
}
a::after{
 content: " > ( " attr(target) " ) ";
 color:green;
}

content 甚至可以使用url 放入图片的功能，下列的程式码会呈现出三张图片。

div::before{
 content:url(图片网址) url(图片网址) url(图片网址);
}

通过调整border的属性，我们可以实现上下左右的三角形，再结合伪元素before，after，content可以绘制多种多边形，笔者在这篇文章有过介绍，感兴趣的可以看看：只用1个div，你能用CSS绘制：正3、4、5、6、7、8边形吗？

content搭配quotes使用

在CSS里有个不常用的属性就是quotes，这是做为定义「括号格式」的属性，也就是如果在一段文字被包住，这段文字的前后就会出现自定义的标签替换（可以是括号、特殊符合、文字等），而且quotes支持多层嵌套，也就是你可以一层层的写下去，以下面这段HTML文字举例：

最外层<q>第一层<q>第二层</q><q>第二层<q>第三层</q></q></q>

quotes 的属性如果只写一层，就会看到只出现一种括号，前后括号使用空白分隔，两组为一个单位，前后可以不同符号。

q{
 quotes: ' < ' ' > ';
}

如果写了三层，就会看到出现三种括号，也会把文字当作括号使用。

q{
 quotes: ' < ' ' > ' ' ya ' ' ya ' ' ( ' ' ) ' ;
}

（请注意开合标签的就近分配原则）

同样的道理，我们可以应用在content里面，而且通过伪元素::before和::after处于前后的预设位置，甚至不用就实现前后括号的效果，以下面这段HTML文字举例，把刚刚的q全部换成span：

最外层<span>第一层<span>第二层</span><span>第二层<span>第三层</span></span></span>

CSS的部分比较特别，在伪元素content里使用了open-quote (启始括号)和close-quote (结束括号)这两个有趣的值，换句话说open-quote对应到，close-quote对应到，此外也由于括号是在伪元素内，就可以指定不同的颜色或样式了。

span{
 quotes: ' < ' ' > ' ' ya ' ' ya ' ' ( ' ' ) ' ;
}
span::before{
 content:open-quote;
 color:red;
}
span::after{
 content:close-quote;
 color:#aaa;
}

文章来源：https://www.oxxostudio.tw/articles/201706/pseudo-element-1.html
原文作者：oxxostudio
由于网页为繁体内容，术语描述和标点话术的差异的问题，笔者在保证不改变原意的基础上做了调整，并且内容页进行了验证确认无误，欢迎大家指正。

小结

虽然说伪元素很好用，但伪元素的内容实际上不存在网页里( 如果打开浏览器的开发者工具，是看不到内容的)，所以如果在里头塞了太多的重要的内容，反而会影响到SEO 的成效，因此对于使用伪元素的定位，还是当作「辅助」性质会比较恰当。

在线咨询

上一篇：黑白激光办公打印，我只选兄弟
下一篇：前端入门-JavaScript 操作符

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JavaScript-第四章

happen-before 原则

happen-before 与 JMM 的关系

如何学习 Java 内存模型(JMM)

JMM 可以解决什么问题？

简化多线程编程，保证程序可移植性

对指令重排序提供清晰的规范

JVM 开发者

Java 应用工程师

Java 内存模型的抽象定义

JMM 是怎么解决可见性的问题

JMM 内部是怎样实现 happen-before 原则的？

以 volatile 变量为例：

volatile 使用了内存屏障实现可见性

程序员开发者社区

什么是「伪元素」？

认识::before 与::after

实用的content

content搭配quotes使用

小结

您的项目需求