GithubHelp home page GithubHelp logo

hchengx.github.io's People

Contributors

qiforan avatar

Watchers

 avatar

hchengx.github.io's Issues

JavaScript 继承

1、原型链继承

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

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

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
复制代码

原型链方案存在的缺点:多个实例对引用类型的操作会被篡改。

function SuperType(){
  this.colors = ["red", "blue", "green"];
}
function SubType(){}

SubType.prototype = new SuperType();

var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"

var instance2 = new SubType();
alert(instance2.colors); //"red,blue,green,black"
复制代码

2、借用构造函数继承

使用父类的构造函数来增强子类实例,等同于复制父类的实例给子类(不使用原型)

function  SuperType(){
    this.color=["red","green","blue"];
}
function  SubType(){
    //继承自SuperType
    SuperType.call(this);
}
var instance1 = new SubType();
instance1.color.push("black");
alert(instance1.color);//"red,green,blue,black"

var instance2 = new SubType();
alert(instance2.color);//"red,green,blue"
复制代码

核心代码是SuperType.call(this),创建子类实例时调用SuperType构造函数,于是SubType的每个实例都会将SuperType中的属性复制一份。

缺点:

  • 只能继承父类的实例属性和方法,不能继承原型属性/方法
  • 无法实现复用,每个子类都有父类实例函数的副本,影响性能

3、组合继承

组合上述两种方法就是组合继承。用原型链实现对原型属性和方法的继承,用借用构造函数技术来实现实例属性的继承。

function SuperType(name){
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
  alert(this.name);
};

function SubType(name, age){
  // 继承属性
  // 第二次调用SuperType()
  SuperType.call(this, name);
  this.age = age;
}

// 继承方法
// 构建原型链
// 第一次调用SuperType()
SubType.prototype = new SuperType();
// 重写SubType.prototype的constructor属性,指向自己的构造函数SubType
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
    alert(this.age);
};

var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //29

var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //27
复制代码  

缺点:

  • 第一次调用SuperType():给SubType.prototype写入两个属性name,color。
  • 第二次调用SuperType():给instance1写入两个属性name,color。

实例对象instance1上的两个属性就屏蔽了其原型对象SubType.prototype的两个同名属性。所以,组合模式的缺点就是在使用子类创建实例对象时,其原型中会存在两份相同的属性/方法。

4、原型式继承

利用一个空对象作为中介,将某个对象直接赋值给空对象构造函数的原型。

function object(obj){
  function F(){}
  F.prototype = obj;
  return new F();
}
复制代码

object()对传入其中的对象执行了一次浅复制,将构造函数F的原型直接指向传入的对象。

var person = {
  name: "Nicholas",
  friends: ["Shelby", "Court", "Van"]
};

var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");

var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");

alert(person.friends);   //"Shelby,Court,Van,Rob,Barbie"
复制代码

缺点:

  • 原型链继承多个实例的引用类型属性指向相同,存在篡改的可能。
  • 无法传递参数

另外,ES5中存在Object.create()的方法,能够代替上面的object方法。

5、寄生式继承

核心:在原型式继承的基础上,增强对象,返回构造函数

function createAnother(original){
  var clone = object(original); // 通过调用 object() 函数创建一个新对象
  clone.sayHi = function(){  // 以某种方式来增强对象
    alert("hi");
  };
  return clone; // 返回这个对象
}
复制代码

函数的主要作用是为构造函数新增属性和方法,以增强函数

var person = {
  name: "Nicholas",
  friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"hi"
复制代码

缺点(同原型式继承):

  • 原型链继承多个实例的引用类型属性指向相同,存在篡改的可能。
  • 无法传递参数

6、寄生组合式继承

结合借用构造函数传递参数和寄生模式实现继承

function inheritPrototype(subType, superType){
  var prototype = Object.create(superType.prototype); // 创建对象,创建父类原型的一个副本
  prototype.constructor = subType;                    // 增强对象,弥补因重写原型而失去的默认的constructor 属性
  subType.prototype = prototype;                      // 指定对象,将新创建的对象赋值给子类的原型
}

// 父类初始化实例属性和原型属性
function SuperType(name){
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
  alert(this.name);
};

// 借用构造函数传递增强子类实例属性(支持传参和避免篡改)
function SubType(name, age){
  SuperType.call(this, name);
  this.age = age;
}

// 将父类原型指向子类
inheritPrototype(SubType, SuperType);

// 新增子类原型属性
SubType.prototype.sayAge = function(){
  alert(this.age);
}

var instance1 = new SubType("xyc", 23);
var instance2 = new SubType("lxy", 23);

instance1.colors.push("2"); // ["red", "blue", "green", "2"]
instance1.colors.push("3"); // ["red", "blue", "green", "3"]
复制代码

这个例子的高效率体现在它只调用了一次SuperType 构造函数,并且因此避免了在SubType.prototype 上创建不必要的、多余的属性。于此同时,原型链还能保持不变;因此,还能够正常使用instanceofisPrototypeOf()

这是最成熟的方法,也是现在库实现的方法

7、混入方式继承多个对象

function MyClass() {
     SuperClass.call(this);
     OtherSuperClass.call(this);
}

// 继承一个类
MyClass.prototype = Object.create(SuperClass.prototype);
// 混合其它
Object.assign(MyClass.prototype, OtherSuperClass.prototype);
// 重新指定constructor
MyClass.prototype.constructor = MyClass;

MyClass.prototype.myMethod = function() {
     // do something
};
复制代码

Object.assign会把 OtherSuperClass原型上的函数拷贝到 MyClass原型上,使 MyClass 的所有实例都可用 OtherSuperClass 的方法。

8、ES6类继承extends

extends关键字主要用于类声明或者类表达式中,以创建一个类,该类是另一个类的子类。其中constructor表示构造函数,一个类中只能有一个构造函数,有多个会报出SyntaxError错误,如果没有显式指定构造方法,则会添加默认的 constructor方法,使用例子如下。

class Rectangle {
    // constructor
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }

    // Getter
    get area() {
        return this.calcArea()
    }

    // Method
    calcArea() {
        return this.height * this.width;
    }
}

const rectangle = new Rectangle(10, 20);
console.log(rectangle.area);
// 输出 200

-----------------------------------------------------------------
// 继承
class Square extends Rectangle {

  constructor(length) {
    super(length, length);

    // 如果子类中存在构造函数,则需要在使用“this”之前首先调用 super()。
    this.name = 'Square';
  }

  get area() {
    return this.height * this.width;
  }
}

const square = new Square(10);
console.log(square.area);
// 输出 100
复制代码

extends继承的核心代码如下,其实现和上述的寄生组合式继承方式一样

function _inherits(subType, superType) {

    // 创建对象,创建父类原型的一个副本
    // 增强对象,弥补因重写原型而失去的默认的constructor 属性
    // 指定对象,将新创建的对象赋值给子类的原型
    subType.prototype = Object.create(superType && superType.prototype, {
        constructor: {
            value: subType,
            enumerable: false,
            writable: true,
            configurable: true
        }
    });

    if (superType) {
        Object.setPrototypeOf
            ? Object.setPrototypeOf(subType, superType)
            : subType.__proto__ = superType;
    }
}
复制代码

总结

1、函数声明和类声明的区别

函数声明会提升,类声明不会。首先需要声明你的类,然后访问它,否则像下面的代码会抛出一个ReferenceError。

let p = new Rectangle();
// ReferenceError

class Rectangle {}
复制代码

2、ES5继承和ES6继承的区别

  • ES5的继承实质上是先创建子类的实例对象,然后再将父类的方法添加到this上(Parent.call(this)).

  • ES6的继承有所不同,实质上是先创建父类的实例对象this,然后再用子类的构造函数修改this。因为子类没有自己的this对象,所以必须先调用父类的super()方法,否则新建实例报错。

参考:

转载自:javaScript常用八种继承方案

补码原理

若计算机定点整数 $x$ 的位长 为 $n+1$,首位为符号位,则表示范围为 $-2^n \leq x \leq 2^n - 1$,。
若为正数,符号位为 $0$,数值部分与原码相同;若为负数,符号位为 $1$,数值部分由其原码“各位取反,末位加一”。

补码加减法运算是一个模 $2^{n+1}$ 的同余类上的运算(范围为补码的表示范围)。当最大值 $2^n-1$ 加一,会跳转到最小值 $-2^n$,因为 $2^n \equiv -2^n \pmod{2^{n+1}}$ ,此为 正溢出;反之亦然,为 负溢出

补码减法运算可以表示为加法运算, $[A-B]_补 = [A]_补 + [-B]_补$,在计算机中可以省略掉减法器的设计。

溢出判断

由于减法运算最终还是通过加法实现,此处仅考虑加法的溢出。

方法一:一位符号位

设 A 的符号位 $A_s$,B 的符号位为 $B_s$,运算结果的符号为 $S_s$,则 溢出判断为 $V = A_sB_S\overline{S_s} + \overline{A_s}\overline{B_s}S_s$,含义为两数皆为正结果为负,或者两数皆为负结果为正。

方法二:双符号位。

设运算结果有两个符号位 $S_{s1}S_{s2}$,两个符号位相同表示未溢出,相反表示溢出,此时最高位表示真正的符号。可以理解为,此时为 模 $2^{n+2}$ 运算。

Javascript 模块

概述

CommonJS 服务器端规范

在CommonJS中,暴露模块使用module.exportsexports,加载模块用全局性方法require()

AMD规范

AMD是”Asynchronous Module Definition”的缩写,意思就是”异步模块定义”。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。
模块必须采用特定的define()函数来定义

define(id?, dependencies?, factory)
  • id:字符串,模块名称(可选)
  • dependencies: 是我们要载入的依赖模块(可选),使用相对路径。注意是数组格式
  • factory: 工厂方法,返回一个模块函数

现阶段的标准

ES6标准发布后,module成为标准,标准使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们依然采用的是CommonJS规范,使用require引入模块,使用module.exports导出接口。

export导出模块

export语法声明用于导出函数、对象、指定文件(或模块)的原始值。

命名式导出

模块可以通过export前缀关键词声明导出对象,导出对象可以是多个。这些导出对象用名称进行区分,称之为命名式导出。

export { myFunction }; // 导出一个已定义的函数
export const foo = Math.sqrt(2); // 导出一个常量

export * from 'article';

var name = 'IT笔录';
var domain = 'http://itbilu.com';
 
export {name, domain}; // 相当于导出 {name:name,domain:domain}

// 可以使用as关键字对导出成员进行重命名
var name = 'IT笔录';
var domain = 'http://itbilu.com';
 
export {name as siteName, domain};

默认导出

默认导出也被称做定义式导出。命名式导出可以导出多个值,但在在import引用时,也要使用相同的名称来引用相应的值。而默认导出每个导出只有一个单一值,这个输出可以是一个函数、类或其它类型的值,这样在模块import导入时也会很容易引用。

export default function() {}; // 可以导出一个函数
export default class(){}; // 也可以出一个类

通过export方式导出,在导入时要加{ },export default则不需要

import引入模块

import语法声明用于从已导出的模块、脚本中导入函数、对象、指定文件(或模块)的原始值。
import模块导入与export模块导出功能相对应,也存在两种模块导入方式:命名式导入(名称导入)和默认导入(定义式导入)

Ubuntu 的安装配置

系统安装

Ubuntu 18.04 lts 为例,在同一块硬盘安装双系统。

优盘安装系统

  1. 下载 iso,选择 ubuntu-18.04.5-desktop-amd64.iso,也可以选择国内镜像

  2. 使用 rufus 制作启动盘

  3. 准备合适大小的空闲分区

  4. F12 进入 BIOS, 注意使用笔记本自带键盘

  5. 直接给 / 分配全部分区

  6. 更新显卡驱动

安装中文输入法

  1. 从搜狗输入法 官网 下载 Linux 版本的输入法

  2. 安装

cd Downloads/
sudo dpkg -i sogoupinyin*.deb
# 如果报错
sudo apt  --fix-broken install
  1. 进入 Language Support 界面,在 Keyboard input method system 一栏中选择 ficix, 然后点击 Apply System-Wide,并重启

  2. 点击右上角的键盘标志,单击 Configure 项,进入下面的 Input Method 界面后,选择 + 号,进入 Add input method 界面,取消勾选 Only Show Current Language,添加搜狗输入法,并移到第一位

SSH 相关

1. ssh免密登录

原理:把本机的公钥保存到目标机的 authorized_keys

对于Linux/OSX,使用 ssh-copy-id 命令。

Windows 不支持该命令,可以 通过 scp 等方式,再 cat [public_key] >> .ssh/authorized_keys

tmux 使用

启动与退出

键入tmux 命令,就进入了 Tmux 窗口。

按下 Ctrl+d 或者显式输入 exit 命令,就可以退出 Tmux 窗口。

前缀键

Tmux 窗口有大量的快捷键。所有快捷键都要通过前缀键唤起。默认的前缀键是 Ctrl+b ,即先按下 Ctrl+b,快捷键才会生效。

会话管理

通过 tmux 命令可以建立会话。依次建立的会话编号是 0,1,以此类推。

$ tmux new -s <session-name>

上面命令新建一个指定名称的会话。

tmux ls 命令可以查看当前所有的 Tmux 会话。

分离会话

在 Tmux 窗口中,按下 Ctrl+b d 或者输入 tmux detach 命令,就会将当前会话与窗口分离。

分离会话后,会话和里面的进程仍然在后台运行。

接入会话

tmux attach 命令用于重新接入某个已存在的会话。

# 使用会话编号
$ tmux attach -t 0

# 使用会话名称
$ tmux attach -t <session-name>

杀死会话

tmux kill-session命令用于杀死某个会话。

# 使用会话编号
$ tmux kill-session -t 0
# 使用会话名称
$ tmux kill-session -t <session-name>

切换会话

tmux switch 命令用于切换会话。

# 使用会话编号
$ tmux switch -t 0

# 使用会话名称
$ tmux switch -t <session-name>

重命名会话

tmux rename-session 命令用于重命名会话。

$ tmux rename-session -t 0 <new-name>

窗格操作

Tmux 可以将窗口分成多个窗格(pane),每个窗格运行不同的命令。以下命令都是在 Tmux 窗口中执行。

划分窗格

tmux split-window 命令用来划分窗格

# 划分上下两个窗格
$ tmux split-window

# 划分左右两个窗格
$ tmux split-window -h

窗口管理

下面是一些窗口操作的快捷键。

  • Ctrl+b c:创建一个新窗口,状态栏会显示多个窗口的信息。
  • Ctrl+b p:切换到上一个窗口(按照状态栏上的顺序)。
  • Ctrl+b n:切换到下一个窗口。
  • Ctrl+b <number>:切换到指定编号的窗口,其中的是状态栏上的窗口编号。
  • Ctrl+b w:从列表中选择窗口。
  • Ctrl+b ,:窗口重命名。

参考资料

Tmux 使用教程 作者: 阮一峰https://www.ruanyifeng.com/blog/2019/10/tmux.html

ssh 免密登录

ssh 的两种登陆方式介绍

  • 口令验证
  • 密钥验证登陆

ssh 免密登陆步骤(主机A登录至主机B)

  1. 在主机 A 下生成公钥和私钥
ssh-keygen -t rsa     ##-t rsa可以省略,默认就是生成rsa类型的密钥
  1. 将公钥复制到主机B的 ~/.ssh/authorized_keys 文件中
# 方法一:ssh-copy-id,windows 不可用
ssh-copy-id -i ~/.ssh/id_rsa.pub userB@host
# 方法二:复制 `id_rsa.pub` 到 `authorized_keys`
cat id_rsa.pub >> ~/.ssh/authorized_keys

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.