【前端面试】05 创建对象和原型链

系统管理员 2024-04-17 05:25 69阅读 0赞

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web

### 文章目录 ###

*  1.问题
 *  2.解决方法
 *   *  2.1 面向对象3大特性
     *  2.2 创建对象方法
     *  2.3 原型、构造函数、实例、原型链
     *  2.4 instanceof原理
     *  2.5 new运算符

# 1.问题 #

1.面向对象3大特性  
2.原型链的知识

*  创建对象有几种方法？
 *  原型、构造函数、实例、原型链
 *  instanceof原理？
 *  new运算符

# 2.解决方法 #

## 2.1 面向对象3大特性 ##

*  封装：不希望暴露函数中属性或者方法的地址，使外界不能操作，但是可以暴露特有的公有接口
 *  继承：基于原型对象、原型链继承
 *  多态：弱数据类型中都是没有多态的，或者说都天然支持多态

## 2.2 创建对象方法 ##

*  **字面量**

var onj1={ name:'hyo'};
    var obj2=new Objecr{ name:'hyo'};

*  **构造函数**

var H= function (name) { 
            this.name = name;
        }
    var obj3 = new H('HYO');

*  **Object.create**

var p = { name:'hyo'};
    var obj3 = Object.create(p);

## 2.3 原型、构造函数、实例、原型链 ##

1.原型：比如Object

2.构造函数：任何一个函数，如果在前面加了new，那就是构造函数。

3.**原型、构造函数、实例三者关系？**

*  构造函数通过new生成实例
 *  构造函数也是函数，**其prototype（ \[ˈproʊtətaɪp\] ）指向原型**（如下，Foo.prototype指向原型）
 *  原型对象中有constructor，指向该原型的构造函数（如下，Foo.prototype.constructor===Foo）
 *  `实例的__ proto __指向原型,(如下，foo.__proto__ === Foo.prototype)`

var Foo = function (name) { //原型对象Foo
            this.name = name;
        }
     var foo = new Foo('smyhvae');//实例foo

4.原型链

*  **原理**：任何一个实例，通过原型链，找到它上面的原型，该原型对象中的方法和属性，可以被所有的原型实例共享。
 *  Object是原型链的顶端。
 *  **关键**：在访问一个实例的时候，如果实例本身没找到此方法或属性，就往原型上找。如果还是找不到，继续往上一级的原型上找。

## 2.4 instanceof原理 ##

*  **作用**：判断**实例**属于哪个**构造函数**
 *  **原理**：判断实例对象的`__proto__`属性，和构造函数的prototype属性，是否为同一个引用  
    但是，

foo instance of Foo的结果为true，因为foo.__proto__ === Foo.prototype为true。
    foo instance of Objecet的结果也为true，因为Foo.prototype.__proto__ === Object.prototype为true。

为了更加严谨些，用consturctor判断。

*  foo`.__proto__.`constructor === Foo的结果为true，但是 foo.**proto**.constructor === Object的结果为false。

## 2.5 new运算符 ##

**当new Foo（）时发生什么？**

*  创建一个**新的空对象实例**
 *  将此空对象的**隐式原型**指向其构造函数的**显示原型**
 *  执行构造函数， this 指向这个新实例。