1. 数据类型判断
  2. 原型，实例，对象，构造函数，创建对象，继承
  3. 实现new，instanceof，call, apply, bind

JS中数据类型的判断

  1. typeof 对于原始类型来说，除了 null 都可以显示正确的类型
  1. console.log(typeof 2);               // number
  2. console.log(typeof true);            // boolean
  3. console.log(typeof 'str');           // string
  4. console.log(typeof []);              // object     []数组的数据类型在 typeof 中被解释为 object
  5. console.log(typeof function(){});    // function
  6. console.log(typeof {});              // object
  7. console.log(typeof undefined);       // undefined
  8. console.log(typeof null);            // object     null 的数据类型被 typeof 解释为 object
  • typeof 对于对象来说，除了函数都会显示 object，像数组和对象都是object，所以想判断一个对象的正确类型，这时候需要使用 instanceof
  1. instanceof
    instanceof 可以正确的判断对象的类型，因为内部机制是通过判断对象的原型链中是不是能找到类型的 prototype。
  1. console.log(2 instanceof Number);                    // false
  2. console.log(true instanceof Boolean);                // false 
  3. console.log('str' instanceof String);                // false  
  4. console.log([] instanceof Array);                    // true
  5. console.log(function(){} instanceof Function);       // true
  6. console.log({} instanceof Object);                   // true    
  7. // console.log(undefined instanceof Undefined);
  8. // console.log(null instanceof Null);
  • instanceof可以精准判断引用数据类型（Array，Function，Object），而基本数据类型不能被instanceof精准判断。
    instanceof 在MDN中的解释：instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。
  1. constructor
  1. console.log((2).constructor === Number); // true
  2. console.log((true).constructor === Boolean); // true
  3. console.log(('str').constructor === String); // true
  4. console.log(([]).constructor === Array); // true
  5. console.log((function() {}).constructor === Function); // true
  6. console.log(({}).constructor === Object); // true
  7. 这里有一个坑，如果我创建一个对象，更改它的原型，constructor就会变得不可靠了
  8. function Fn(){};
  10. Fn.prototype=new Array();
  12. var f=new Fn();
  14. console.log(f.constructor===Fn);    // false
  15. console.log(f.constructor===Array); // true
  1. Object.prototype.toString.call() 使用 Object 对象的原型方法 toString ，使用 call 进行狸猫换太子，借用Object的 toString 方法
  1. var a = Object.prototype.toString;
  3. console.log(a.call(2));
  4. console.log(a.call(true));
  5. console.log(a.call('str'));
  6. console.log(a.call([]));
  7. console.log(a.call(function(){}));
  8. console.log(a.call({}));
  9. console.log(a.call(undefined));
  10. console.log(a.call(null));

原型,实例,对象,构造函数

js-base-interview1 - 图1

创建对象的方式

  2. function Person(name) {
  3.   this.name = name;
  4. }
  5. Person.prototype = {
  6.   constructor: Person,
  7.   getName: function () {
  8.     console.log(this.name);
  9.   }
  10. }
  11. var person = new Person("james");

继承的方式

  2. function Parent(name) {
  3.   this.name = name;
  4.   this.colors = ['red', 'blue', 'green'];
  5. }
  7. Parent.prototype.getName = function () {
  8.   console.log(this.name)
  9. }
  11. function Child(name, age) {
  13.   Parent.call(this, name);
  15.   this.age = age;
  17. }
  19. Child.prototype = new Parent();
  20. Child.prototype.constructor = Child;
  22. var child1 = new Child('devin', '18');
  24. child1.colors.push('black');
  26. console.log(child1.name); // devin
  27. console.log(child1.age); // 18
  28. console.log(child1.colors); // ["red", "blue", "green", "black"]
  30. var child2 = new Child('young', '20');
  32. console.log(child2.name); // daisy
  33. console.log(child2.age); // 20
  34. console.log(child2.colors); // ["red", "blue", "green"]

手写实现new

  1. 创建一个简单的空对象
  2. 链接该对象（即设置该对象的构造函数）到另一个对象 ；
  3. 将创建的新的对象作为this的上下文
  4. 如果该函数没有返回对象则返回this， 如果返回值是一个对象就返回该对象，否则返回构造函数的一个实例对象
  1.    function create(){
  2.      var obj = new Object();
  3.      let con = [].shift.call(arguments);
  4.      obj.__proto__ = con.prototype;
  5.      con.apply(obj, arguments);
  6.      return obj;
  7.    }
  9.    function Car(color){
  10.      this.color = color;
  11.    }
  13.    Car.prototype.start = function() {
  14.      console.log(this.color + "zhaobuchu"); 
  15.    }
  17.    var car = create(Car, "blue")
  18.    console.log(car.color);
  19.    console.log(car.start());
  2. function create() {
  3.   Con = [].shift.call(arguments);
  4.   var obj = Object.create(Con.prototype);
  5.   var ret = Con.apply(obj,arguments);
  6.   return ret instanceof Object ? ret : obj;
  7. }
  9. function Car(color, name) {
  10.   this.color = color;
  11.   return {
  12.     name: name
  13.   }
  14. }
  15. var car = create(Car, "blue", "宝马")
  16. console.log(car.color);
  17. console.log(car.name)

手写实现instanceOf

instanceof 可以正确的判断对象的类型，因为内部机制是通过判断对象的原型链中是不是能找到类型的 prototype。

实现 instanceof：

  1. 首先获取类型的原型
  2. 然后获得对象的原型
  3. 然后一直循环判断对象的原型是否等于类型的原型，直到对象原型为 null，因为原型链最终为 null
  2. function instanceOf(left, right){
  3.   let proto = left._proto_;
  4.   let prototype = right.prototype;
  5.   while (true) {
  6.     if(proto === null)
  7.       return false;
  8.     if(proto === prototype) 
  9.       return true;
  10.     proto = proto._proto_;
  11.   }
  12. }

手写实现call

  1. 用this获取这个函数并设置为对象的属性
  2. 执行这个函数
  3. 删除这个函数
  4. 指定this到函数并传入给定参数执行函数,如果不传入参数，默认指向为 window
  2. Function.prototype.call2 = function(context = window) {
  3.   context.fn = this;
  4.   let args = [...arguments].slice(1);
  5.   context.fn(...args);
  6.   delete context.fn;
  7. }
  9. var foo = {
  10.   value: 'zhaobuchu',
  11. }
  12. function bar(name, age) {
  13.   console.log(name);
  14.   console.log(age);
  15.   console.log(this.value);
  16. }
  17. bar.call2(foo, 'yangwenxu', 22)

手写实现apply

  2. Function.prototype.apply2 = function(context = window) {
  3.   context.fn = this;
  4.   if(arguments[1]) {
  5.     var result = context.fn(...arguments[1])
  6.   } else {
  7.     var result = context.fn();
  8.   }
  9.   delete context.fn;
  10.   return result;
  11. }
  13. var obj = {
  14.   value: "zhaobuchu"
  15. }
  17. function bar(name, age) {
  18.   console.log(name);
  19.   console.log(age);
  20.   console.log(this.value);
  21. }
  23. bar.apply2(obj, ["yangwenxu", 22]);

手写实现bind

  1. 使用 call / apply 指定 this 。
  2. 使用 return 返回一个函数。
  3. 使用 arguments 获取参数数组并作为 self.apply() 的第二个参数。
  4. 获取返回函数的参数，然后同第3点的参数合并成一个参数数组，并作为 self.apply() 的第二个参数.
  2. Function.prototype.bind2 = function(context){
  3.   if (typeof this !== "function") {
  4.     throw new Error("Function.prototype.bind - what is trying to be bound is not callable");
  5.   }
  6.   let self = this;
  7.   var args = Array.prototype.slice.call(arguments, 1)
  8.   return function() {
  9.     var bindArgs = [].slice.call(arguments);
  10.     return self.apply(context, args.concat(bindArgs));
  11.   }
  12. }
  15. var value = 2;
  16. var foo = {
  17.   value: "zhaobuchu",
  18. }
  19. function bar(name, age){
  20.   return {
  21.     value: this.value,
  22.     name: name,
  23.     age: age,
  24.   }
  25. }
  26. var bindFoo = bar.bind2(foo, "james");
  27. bindFoo(22);

一个绑定函数也能使用new操作符创建对象：
这种行为就像把原函数当成构造器，提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。

  2. Function.prototype.bind2 = function (context) {
  3.   var self = this;
  4.   var args = Array.prototype.slice.call(arguments, 1);
  6.   var fBound = function () {
  7.       var bindArgs = Array.prototype.slice.call(arguments);
  9.       // 注释1
  10.       return self.apply(
  11.           this instanceof fBound ? this : context, 
  12.           args.concat(bindArgs)
  13.       );
  14.   }
  15.   // 注释2
  16.   fBound.prototype = this.prototype;
  17.   return fBound;
  18. }
  19. var value = 2;
  20. var foo = {
  21.   value: "zhaobuchu",
  22. }
  23. function bar(name, age) {
  24.   this.habit = 'shopping';
  25.   console.log(this.value);
  26.   console.log(name);
  27.   console.log(age);
  28. }
  29. bar.prototype.friend = 'kevin';
  31. var bindFoo = bar.bind2(foo, 'Jack');
  32. var obj = new bindFoo(20);
  34. console.log(obj.habit);
  36. console.log(obj.friend);

bind实现需要考虑实例化后对原型链的影响。
用一个空对象作为中介，把 fBound.prototype 赋值为空对象的实例（原型式继承）。

  2. Function.prototype.bind2 = function (context) {
  4.   if (typeof this !== "function") {
  5.     throw new Error("Function.prototype.bind - what is trying to be bound is not callable");
  6.   }
  8.   var self = this;
  9.   var args = Array.prototype.slice.call(arguments, 1);
  11.   var fNOP = function () {};
  13.   var fBound = function () {
  14.       var bindArgs = Array.prototype.slice.call(arguments);
  15.       return self.apply(this instanceof fNOP ? this : context, args.concat(bindArgs));
  16.   }
  18.   fNOP.prototype = this.prototype;
  19.   fBound.prototype = new fNOP();
  20.   return fBound;
  21. }