JS 基础知识（上）

值类型 vs 引用类型

var a = 200;
var b = a;
a = 100;
console.log(b); //200

var a = { age: 20 };
var b = a;
b.age = 21;
console.log(a.age); //21

引用类型：对象、数组、函数

typeof 运算符详解

typeof undefined; // undefined
typeof "abc"; // string
typeof 123; // number
typeof true; //boolean
typeof {}; //object
typeof []; //object
typeof null; //object
typeof console.log; //function

typeof 只能用来区分值类型

强制类型转换

var a = 100 + 10; // 110
var b = 100 + "10"; // '10010'
100 == "100"; // true
0 == ""; // true
null == undefined; //true
console.log(10 && 0); // 0
console.log("" || "abc"); // 'abc'
console.log(!window.abc); // true

// 判断一个变量会被当作 true Or false
console.log(!!a);

何时适用 === 何时适用 ==

// 这里相当于 obj.a === null || obj,a === undefined，简写模式
// 这里是 jquery 源码中推荐的写法，其他地方全用 ===
if(obj.a == null){
  ...
}

如何理解 JSON

// JSON 是一种数据格式，也是一个JS对象而已
JSON.stringify({ a: 10, b: 20 });
JSON.parse("{a:10,b:20}");

构造函数

function Foo(name, age) {
  this.name = name;
  this.age = age;
  this.class = "class-1";
  //return this;  // 默认有这一行
}
var f = new Foo("zhangsan", 20);
// var f1 = new Foo('lisi',22); // 创建多个对象

构造函数-扩展

var a = {}; // <=> var a = new Object();
var a = []; // <=> var a = new Array();
function Foo(){...} // <=> var Foo = new Function(...)
// 使用 instanceof 判断一个函数是否是一个变量的构造函数

原型规则和示例

var obj = {};
obj.a = 100;
var arr = [];
arr.a = 100;
function fn() {}
fn.a = 100;

console.log(obj.__proto__);
console.log(arr.__proto__);
console.log(fn.__proto__);

console.log(fn.prototype);

console.log(obj.__proto__ === Object.prototype);

function Foo(name, age) {
  this.name = name;
}
Foo.prototype.alertName = function() {
  alert(this.name);
};
var f = new Foo("zhangsan");
f.printName = function() {
  console.log(this.name);
};
f.printName();
f.alertName();
f.toString(); // 要去 f.__proto__.__proto__中查找

f.__proto__ === Foo.prototype; // true
Foo === Foo.prototype.constructor; // true

// f.__proto__.__proto__ === Foo.prototype.__proto__ === Object.prototype

f instanceof Foo; // true
f instanceof Object; // true

原型链继承的例子

//基础的写法
function Animal() {
  this.eat = function() {
    console.log("animal eat");
  };
}
function Dog() {
  this.eat = function() {
    console.log("dog eat");
  };
}
Dog.prototype = new Animal();
var hashiqi = new Dog();

贴近实战的原型继承示例

//写一个封装 DOM 查询的例子
function Elem(id) {
  this.elem = document.getElementById(id);
}
Elem.prototype.html = function(val) {
  var elem = this.elem;
  if (val) {
    elem.innerHtml = val;
    return this; // 返回 this 是为了链式操作
  } else {
    return elem.innerHtml;
  }
};
Elem.prototype.on = function(type, fn) {
  var elem = this.elem;
  elem.addEventListener(type, fn);
  return this;
};

var div1 = new Elem("div1");
console.log(div1.html());
div1.html("<p>hello</p>").on("click", function() {
  alert("clicked");
});

JavaScript 的六种继承方式

越往后越完善，JavaScript 新出的标准其实已经有 class 语法糖了，会更加方便

原型链继承

// 关键代码
child.prototype = new parents();

问题：单纯的使用原型链继承，主要问题来自包含引用类型值的原型，会使各个实例对引用类型进行共享

解决方案：使用构造函数，在子类构造函数的内部调用父类构造函数，可以借助 apply()和 call()方法来改变对象的执行上下文

function child() {
  parents.call(this);
}

但是，如果仅仅借助构造函数，方法都在构造函数中定义，因此函数无法达到复用，所以出现了组合继承

组合继承(原型链+构造函数)

function parents(name)0{
  this.name = name;
  this.colors = ['red', 'blue', 'green'];
}
function child(job,name){
  parents.call(this,name);
  this.job = job;
}
child.prototype = new parents();
child.prototype.constructor = parents;

这种模式避免了原型链和构造函数继承的缺陷，融合了他们的优点，是最常用的一种继承模式。

原型式继承

借助原型可以基于已有的对象创建新对象，同时还不必因此创建自定义类型。

function extend(obj) {
  function F() {}
  F.prototype = obj;
  return new F();
}

本质上来说，object 对传入其中的对象执行了一次浅复制。

// ES5通过Object.create()方法规范了原型式继承
var person = {
  name: "Jiang",
  friends: ["Shelby", "Court"]
};
var anotherPerson = Object.create(person);
console.log(anotherPerson.friends); // ['Shelby', 'Court']

寄生式继承

寄生式继承的思路与寄生构造函数和工厂模式类似，即创建一个仅用于封装继承过程的函数。

function A(obj) {
  var clone = Object.create(obj);
  clone.say = function() {
    console.log("func:say");
  };
  return clone;
}
var B = { name: "B" };
var Test = A(B);
console.log(Test.name); //B
console.log(Test.say()); //func:say

寄生组合式继承

组合模式(原型链+构造函数)中，继承的时候需要调用两次父类构造函数。

parents.call(this);
child.prototype = new parents();

当 var test = new child() 时，其实会产生两组 name 和 color 属性，一组在 child 实例上，一组在 child 原型上，只不过实例上的屏蔽了原型上的，使用寄生式组合模式，可以规避这个问题。

function parents(name){
  this.name = name;
  this.colors = ['red', 'blue', 'green'];
}
function child(job,name){
  parents.call(this,name);
  this.job = job;
}
function inheritPrototype(child,parents){
  var f =  Object.create(parents.prototype);
  f.constructor = child;
  child.prototype = f;
}
inheritPrototype(child,parents)；
var test = new child('testJob','test');

Object.setPrototypeOf

这是 ES6 新增的方法，可以直接创建关联，而且不用手动添加 constructor 属性。

function parents(name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
function child(job, name) {
  parents.call(this, name);
  this.job = job;
}
Object.setPrototypeOf(child.prototype, parents.prototype);
var test = new child("testJob", "test");
var test2 = new child("testJob2", "test2");

test.colors.push("black");
console.log(test.colors); // ["red", "blue", "green", "black"]
console.log(test2.colors); // ["red", "blue", "green"]

js 判断数据类型的方法

从上面的知识可以知道，我们可以使用 typeof 和 instanceof 的方式来分别判断值类型和引用类型，但是还有其他的方式可以判断，在这里也一起记录下。

声明变量

var bool = true;
var num = 1;
var str = "abc";
var und = undefined;
var nul = null;
var arr = [1, 2, 3];
var obj = { name: "haoxl", age: 18 };
var fun = function() {
  console.log("I am a function");
};

还可以借助判断原型构造函数 constuctor 的方式来判断类型

console.log(bool.constructor === Boolean);
console.log(num.constructor === Number);
console.log(str.constructor === String);
console.log(arr.constructor === Array);
console.log(obj.constructor === Object);
console.log(fun.constructor === Function);

另外还可以借助 Object.prototype.toString() 这个函数来判断类型

console.log(Object.prototype.toString.call(bool) === "[object Boolean]");
console.log(Object.prototype.toString.call(num) === "[object Number]");
console.log(Object.prototype.toString.call(str) === "[object String]");
console.log(Object.prototype.toString.call(und) === "[object Undefined]");
console.log(Object.prototype.toString.call(nul) === "[object Null]");
console.log(Object.prototype.toString.call(arr) === "[object Array]");
console.log(Object.prototype.toString.call(obj) === "[object Object]");
console.log(Object.prototype.toString.call(fun) === "[object Function]");

js 中的真值和假值

当且仅有 +0, -0, 0, NaN, null, undefined, '', false 等值，在转换为布尔值是，都为 false，除此之外的值在转换为布尔值的时候全部为 true