yygmind


  • Home

  • Categories

  • Archives

  • Tags

  • Search

JavaScript常用六种继承方案

Posted on 2018-08-21   |   In 前端 , JS   |     |   visitors

1、原型链方案

构造函数、原型和实例之间的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个原型对象的指针。

继承的本质是重写原型对象,代之以一个新类型的实例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function SuperType() {
this.property = true;
}

SuperType.prototype.getSuperValue = function() {
return this.property;
}

function SubType() {
this.subproperty = false;
}

// 这里是关键,创建SuperType的实例,并将该实例赋值给SubType.prototype
SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function() {
return this.subproperty;
}

var instance = new SubType();
console.log(instance.getSuperValue()); // true

Read more »

JavaScript常用设计模式

Posted on 2018-08-20   |   In 前端 , JS   |     |   visitors

JavaScript常用设计模式

1、单例模式

单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。

在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象。

单例一般用在系统间各种模式的通信协调上。

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
var SingletonTester = (function () {

// 参数:传递给单例的一个参数集合
function Singleton(args) {

// 设置args变量为接收的参数或者为空(如果没有提供的话)
// 只有在使用的时候才初始化
var args = args || {};
// 设置name参数
this.name = 'SingletonTester';
// 设置pointX的值
this.pointX = args.pointX || 6; // 从接收的参数里获取,或者设置为默认值
// 设置pointY的值
this.pointY = args.pointY || 10;

}

// 实例容器
var instance;

var _static = {
name: 'SingletonTester',

// 获取实例的方法
// 返回Singleton的实例
getInstance: function (args) {
if (instance === undefined) {
instance = new Singleton(args);
}
return instance;
}
};
return _static;
})();

var singletonTest = SingletonTester.getInstance({ pointX: 5 });
console.log(singletonTest.pointX); // 输出 5
Read more »

HTML和CSS常见问题整理

Posted on 2018-08-10   |   In 前端 , HTML   |     |   visitors
  • 盒子模型

对于现代浏览器来说,css中指定的width就是content width。

对于IE5.x和6来说,在怪异模式中width等于content、左右padding和左右border。

其中padding和margin的4种写法。

1、上 右 下 左

1
padding:10px 5px 15px 20px;

2、上 右左 下

1
padding:10px 5px 15px;

3、上下 右左

1
padding:10px 5px;

4、四边一致

1
padding:10px;
Read more »

React相关

Posted on 2018-08-07   |   In 前端 , React   |     |   visitors

生命周期

挂载阶段:
  • constructor
  • getDerivedStateFromProps
  • componentWillMount/UNSAVE_componentWillMount
  • render
  • componentDidMount
更新阶段:
  • componentWillReceiveProps/UNSAFE_componentWillReceiveProps
  • getDerivedStateFromProps
  • shouldComponentUpdate
  • componentWillUpdate/UNSAFE_componentWillUpdate
  • render
  • getSnapshotBeforeUpdate
  • componentDidUpdate
卸载阶段
  • componentWillUnmount
Read more »

JS数组常用算法详解

Posted on 2018-08-01   |   In 前端 , JS   |     |   visitors

数组方法概述

1、不改变原数组,返回新数组
  • concat()

    连接两个或多个数组,两边的原始数组都不会变化,返回被连接数组的一个副本。

  • join()

    把数组中所有元素放入一个字符串中,返回字符串。

  • slice()

    从开始到结束(不包括结束)选择数组的一部分浅拷贝到一个新数组。

  • map()

    创建一个新数组并返回,其中新数组的每个元素由调用原始数组中的每一个元素执行提供的函数得来,原始数组不会改变。

  • every()

    对数组中的每个元素都执行一次指定的回调函数,直到回调函数返回false,此时every()返回false并不再继续执行。如果回调函数对每个元素都返回true,那么every()将返回true。

  • some()

    对数组中的每个元素都执行一次指定的回调函数,直到回调函数返回true,此时some()返回true并不再继续执行。如果回调函数对每个元素都返回false,那么some()将返回false。

  • filter()

    创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

Read more »

You Don't Know JS上卷Part2 Chapter4.混合对象“类”

Posted on 2018-07-20   |   In 前端 , JS   |     |   visitors

4.1 混入

  • 混入用来模拟类的复制行为。
4.1.1 显式混入
  • 混入处理的已经不再是类了,因为在JS中不存在类,Vehicle和Car都是对象,进行复制和粘贴。
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
// 非常简单的mixin(..)例子:
function mixin( sourceObj, targetObj ) {
for(var key in sourceObj) {
// 只会在不存在的情况下复制
if(!(key in targetObj)) {
targetObj[key] = sourceObj[key];
}
}
return targetObj;
}

var Vehicle = {
engines: 1,

ignition: function() {
console.log( "Turning on my engine." );
},

drive: function() {
this.ignition();
console.log( "Steering and moving forward!" );
}
};

var Car = mixin( Vehicle, {
wheels: 4,

drive: function() {
Vehicle.drive.call( this ); // 显示多态(伪多态)调用,因为Vehicle和Car中都有drive
console.log(
"Rolling on all" + this.wheels + "wheels!"
);
}
} );
Read more »

You Don't Know JS上卷Part2 Chapter3.对象

Posted on 2018-07-14   |   In 前端 , JS   |     |   visitors

3.1 语法

文字形式和构造形式生成的对象是一样的。

  • 文字(声明)形式

    1
    2
    3
    4
    var myObj = {
    key: value
    // ...
    }
  • 构造形式

    1
    2
    var myObj = new Object();
    myObj.key = value;

3.2 类型

  • 基本数据类型:string、number、boolean、null、undefined、symbol

    • 上述6种数据类型本身不是对象,”JS中万物皆是对象“的说法是错误的
    • typeof null返回字符串”object“,实际上,null本身是基本数据类型,这是语言本身的一个bug。(原理是这样:不同的对象在底层都表示为二进制,在JS中二进制前三位都为0的话会被判断为object类型,null的二进制表示是全0,自然前三位也是0,所以执行typeof时会返回”object“)
  • 引用数据类型:统称为object类型,称作对象子类型(内置对象),细分有String、Number、Boolean、Object、Function、Array、Date、RegExp、Error
Read more »

You Don't Know JS上卷Part2 Chapter1&2.this全面解析

Posted on 2018-07-08   |   In 前端 , JS   |     |   visitors

第1章 关于this

  • this既不指向函数自身也不指向函数的词法作用域
  • this实际上是在函数被调用时发生的绑定,它指向什么完全取决于函数在哪里被调用。this和词法作用域是不一样的,不能混合使用。
  • 当一个函数被调用时,会创建一个活动记录(执行上下文)。这个记录会包含函数在哪里被调用(调用栈)、函数的调用方式、传入的参数等信息。this就是这个记录的一个属性,会在函数执行的过程中用到。
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
// 使用this,提供一种优雅的方式隐式“传递”一个对象引用。API设计更加简洁并且易于复用。
function identify() {
return this.name.toUpperCase();
}

function speak() {
var greeting = "Hello, I'm " + identify.call( this );
console.log( greeting );
}

var me = {
name: "Kyle"
};

var you = {
name: "Reader"
};

identify.call( me ); // KYLE
identify.call( you ); // READER

speak.call( me ); // Hello, I'm KYLE
speak.call( you ); // Hello, I'm READER

// -----------------------------------------------
// 词法作用域方案,显式传递上下文对象方式,会让代码变得越来越混乱
function identify(context) {
return context.name.toUpperCase();
}

function speak(context) {
var greeting = "Hello, I'm " + identify( context );
console.log( greeting );
}

identify( you ); // READER
speak.call( me ); // Hello, I'm KYLE
Read more »

You Don't Know JS上卷Part1 Chapter5.作用域闭包

Posted on 2018-06-30   |   In 前端 , JS   |     |   visitors

5.1 闭包

  • 当函数可以记住并访问所在的词法作用域,即使函数名是在当前词法作用域之外执行,这时就产生了闭包。
1
2
3
4
5
6
7
8
9
10
11
12
13
function foo() {
var a = 2;

function bar() {
console.log( a );
}

return bar;
}

var baz = foo();

baz(); // 2 ---- 这就是闭包的效果

bar()在自己定义的词法作用域以外的地方执行。

bar()拥有覆盖foo()内部作用域的闭包,使得该作用域能够一直存活,以供bar()在之后任何时间进行引用,不会被垃圾回收器回收

  • bar()持有对foo()内部作用域的引用,这个引用就叫做闭包。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 对函数类型的值进行传递
function foo() {
var a = 2;

function baz() {
console.log( a ); // 2
}

bar( baz );
}

function bar(fn) {
fn(); // 这就是闭包
}

foo();
  • 把内部函数baz传递给bar,当调用这个内部函数时(现在叫做fn),它覆盖的foo()内部作用域的闭包就形成了,因为它能够访问a。
Read more »

You Don't Know JS上卷Part1 Chapter4.提升

Posted on 2018-06-23   |   In 前端 , JS   |     |   visitors

第4章 提升

  • 任何声明在某个作用域内的变量,都将附属于这个作用域。
  • 包括变量和函数在内的所有声明都会在任何代码被执行前首先被处理。
  • var a = 2;会被看成两个声明,var a;和a = 2;,第一个声明在编译阶段进行,第二个赋值声明会被留在原地等待执行阶段。
  • 所有的声明(变量和函数)都会被“移动”到各自作用域的最顶端,这个过程叫做提升
  • 只有声明本身会被提升,而包括函数表达式在内的赋值或其他运行逻辑并不会提升。
1
2
3
4
5
6
7
8
9
10
11
12
13
a = 2;

var a;

console.log( a ); // 2

---------------------------------------
// 实际按如下形式进行处理
var a; // 编译阶段

a = 2; // 执行阶段

console.log( a ); // 2
Read more »
12…4
yygmind

yygmind

To obsess or to die

34 posts
10 categories
30 tags
github zhihu csdn
© 2016 - 2018 yygmind
Powered by Hexo
Theme - NexT.Muse