javascript 基础攻关（二）—— 原型和原型链

javascript 基础攻关（二）—— 原型和原型链

1. 如何判断一个变量是数组类型
2. 写一个原型链继承的例子
3. 描述new一个对象的过程

构造函数

// 声明构造函数
function Foo(name, age) {
    this.name = name;
    this.age = age;
    this.class = "class-1";
    return this; //隐示创建
}
// 创建对象
var f =new Foo('yao',25);

构造函数扩展

• var a = {} 其实是 var a = new Object()的语法糖
• var a = [] 其实是 var a = new Array()的语法糖
• function Foo(){...} 其实是 var Foo = new Function(){...}
• 使用instanceof判断一个函数是否是一个变量的构造函数

原型规则

1. 所有的引用类型（数组、对象、函数），都具有对象的特性，即可以自由扩展属性（除了null）
2. 所有的引用类型（数组、对象、函数），都有一个__proto__属性（隐式原型），属性值是一个普通的对象
3. 所有的函数，都有一个prototype属性（显式原型），属性值也是一个普通的对象
4. 所有的引用类型（数组、对象、函数），__proto__属性指向它的构造函数的prototype属性值
5. 当试图得到一个对象的属性时，如果这个对象本身没有这个属性，那么它回去它的__proto__(即它的构造函数的prototype)中寻找

原型链

// 声明构造函数
function Foo(name, age) {
    this.name = name;
    this.age = age;
    this.class = "class-1";
    return this; //隐示创建
}
// 创建对象
var f =new Foo('yao',25);
f.toString()    要去f.__proto__.__proto__中查找，也就是它的构造函数的object中找

2-8原链-0002.png

instanceof

f instanceof Foo的判断逻辑是:

1. f 的 __proto__ 一层一层往上，能否对应到 Foo.prototype
2. 再试着判断 f instanceof Object

题目解答：

1. 如何判断一个变量是数组类型

```js
    var arr=[];
    arr instanceof Array;   //true
    typeof arr;     //Object, typeof 是无法判断数组的
```
    这里要使用`instanceof` 而不是`typeof`，`typeof`判断出来是Object。

2. 写一个原型链继承的例子

   ```js
   function Elem(id) {
       this.elem = document.getElementById(id)
   }
   
   Elem.prototype.html = function(val) {
       var elem = this.elem;
       if (val) {
           elem.innerHtml = val;
           return this; //链式操作
       } else {
           return elem.innerHtml;
       }
   }
   Elem.prototype.on = function(type, fn) {
       var elem = this.elem;
       elem.addEventListener(type, fn)
   }
   
   // 使用
   var div1 = new Elem('div1');
   console.log(div1.html());
   div1.html("
   hello
   ");
   div1.on('click', function() {
       alert('clicked');
   })
   
   ```
   

3. 描述new一个对象的过程

   1. 创建一个新对象
   2. this指向这个新对象
   3. 执行代码，对this赋值
   4. 返回this（隐式返回）

补充：

image.png