JS-原型和原型链面试题解析

题目1.如何准确判断一个变量是数组类型

        var arr = [];
        typeof arr; // obj typeof无法判断是不是数组
        使用 instanceof 方法
        arr instanceof Array // true
        
		如何检测数据类型
        1、验证原型对象
        Object.getPrototypeof(obj) 要检测的类型的构造函数.prototype
        2、验证构造函数
        obj.constructor === 要检测的类型的构造函数
        objinstanceof === 要检测的类型的构造函数
        <!-- constructor属性返回对创建此对象的数组函数的引用。-->
        <--instanceof 判断函数的原型是否在对象的原型链上 -->
        3、检查内部属性class 每个对象中记录对象创建时使用的类型的属性一旦对象被创建，class属性就无法被修改
        Object.prototype.toString.call(obj)==='[object 要判断的类型的构造函数]
        4、typeof 
        typeof 要检测数据类型
        typeof无法判断是不是数组 且无法检测null，null则需要用===来检测

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

 	//动物
    function Animal() {
        this.eat = function() {
            console.log('animal eat')
        }
    }
    //狗
    function Dog() {
        this.bark = function() {
            console.log('dog bark')
        }
    }
    Dog.prototype = new Animal();
    // 二哈
    var hashiqi = new Dog();

实例：封装 DOM 查询
定义构造函数 Elem,属性封装成 id

function Elem(id) {
    this.elem = document.getElementById(id) 
} 
Elem.prototype.html = function(val) {
    var elem = this.elem
    if (val) {
        elem.innerTHTML = 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())

var div1 = new Elem('detail-page')
console.log(div1.html) // 打印出所有的 html

// 将所有的 html 变为 hello imooc ,并且点击弹出 ‘clicked’
div1.html('<p>hello imooc</p>')
div1.on('click', function() {
	alert('clicked ')
})

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

1.创建一个新对象

2.this 指向这个新对象

3.执行代码，即对新对象赋值

4.返回新对象

function Student(name, age) {
    this.name = name
    this.age = age
    this.class = 'class';
    // return this // 每个构造函数都有这句代码，只是默认隐藏了
}
var stu1 = new Student('zhangsan', 20);

大写字母开头一般都是构造函数

new 的过程：
1.创建一个新空对象

2.var stu1 = new Foo(‘zhangsan’,20) 将参数传进去，函数中的 this 会变成空对象

3.this.name = name;this.age = age 为赋值；return this 为实际的运行机制。.return 之后赋值给 stu1 ，stu1 具备了stu1.name = zhangsan、stu1.age = 20

4.返回stu1这个对象

构造函数（扩展）
1.var a = {} 其实是 var a = new Object()的语法糖 （a 的构造函数是 Object 函数）

2.var a = [] 其实是 var a = new Array()的语法糖 （a 的构造函数是 Array 函数）

3.function Foo(){…}其实是 var Foo = new Function(…) （Foo 的构造函数是 Function 函数）

4.使用 instanceof 判断一个函数是否是一个变量的构造函数 (判断一个变量是否为“数组”。变量 instanceof Array)

题目4.编写一个函数出去数组中的重复值（原型链上编程）.

Function.prototype.unqie=function(){
    var newarr = this.filter(function(item, index, array) {
        return array.indexOf(item) === index;
    });
    return newarr;
}

注意：在原型链上编程时，函数不能行进传参，用this代替参数，即谁调用该函数，this为谁。