JavaScript构造函数和原型


  • 能够使用构造函数创建对象
  • 能够说出原型的作用
  • 能够说出访问对象成员的规则
  • 能够说出ES5新增的一些方法

构造函数和原型

在ES6之前,对象不是基于类创建的,而是用一种称为构建函数的特殊函数来定义对象和他们的特征

  • 对象字面量 var obj1 = { };

  • new Object() var obj2 = new Object();

  • 自定义构造函数

  • function Star(){
        xxx;
    }
    <pre class="line-numbers language-none"><code class="language-none">
    ### 构造函数
    
    - 静态成员:在构造函数本身上添加的成员称为静态成员,只能由构造函数本身访问
    - 实例成员:在构造函数内部创建的对象成员称为实例成员,只能由实例化对象访问
    
    ### 构造函数原型 prototype
    
    ![](https://cdn.linxueya.cn/img/JSconstructor-relation.png)
    
    构造函数存在内存分配的问题;通过原型分配的函数是所有对象共享的。每一个构造函数都有一个prototype属性,我们可以把那些==不变的方法,直接定义在prototype对象上==<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span>
    Star.prototype.func();
    
    ### 对象原型 `__protp__`
    
    对象身上系统会自动添加一个`__protp__`,指向构造函数的prototype对象。但在实际开发中,不可以使用这个属性,它只是内部指向原型对象prototype
    
    ### constructor 构造函数
    
    对象原型和构造函数原型对象里面都有一个constructor属性,我们称之为构造函数。
    
    利用字面量来创建原型对象时,需要手动的利用constructor这个属性指回原来的构造函数
    
    ### JavaScript成员查找机制
    
    ![](https://cdn.linxueya.cn/img/JSconstructor-relation2.png)
    
    1. 当访问一个对象的属性或方法时,首先查找这个对象自身有没有该属性
    2. 如果没有就查找它的原型(也就是`__protp__`指向的prototype原型对象)
    3. 如果还没有就查找原型对象的原型(Object的原型对象)
    4. 依此类推一直找到object为止(null)
    5. `__protp__`对象原型的意义在于为对象成员查找机制提供一个方向,或者说一条路线
    
    原型对象和构造函数中的this都指的是实例化对象
    
    ### 拓展内置对象
    
    可以通过原型对象,对原来的内置对象进行拓展自定义的方法。
    
    ```javascript
    // 增加求和函数
    Array.prototype.sum = function(){
        xxx;
    }
    数组和字符串内置对象不能给原型对象覆盖操作

继承

在ES6之前并没有给我们提供extends继承,我们可以通过构造函数+原型对象模拟实现继承,被称为组合继承。

call()

fun.call(thisArg,arg1,arg2,...) 调用这个函数,并且可以修改函数运行时的this指向

借用构造函数继承父类属性

function Father(uname,age){
    this.name = uname;
    this.age = age;
}

function Son(uname,age){
    Father.call(this,uname,age);
}

借用构造函数继承父类方法,需要利用对象的形式修改原型对象,同时constructor指回原来的原型对象

Son.prototype = new Father.prototype;
Son.prototype.constructor = Son;

ES5中新增的方法

数组方法

  • 遍历方法: foreach(), map(), filter(), some(), every();

    // 遍历方法
    array.forEach(function(currentValue,index,arr));
                  
    // 筛选方法,返回数组
    array.filer(function(currentValue,index,arr)){
        retrun value >= 20;
    };
    // 查找元素,返回布尔值
    array.some(function(currentValue,index,arr)){
        retrun value >= 20;
    };
    

    案例:查找商品

案例效果:GO

字符串方法

trim()方法会从字符串的两端删除空白字符,返回新字符串。 str.trim()

对象方法

  1. Object.keys()用于获取对象自身所有的属性object.keys(obj)

  2. Object.defineProperty()定义对象中新属性或修改原有的属性Object.defineProperty(object, prop,descriptor)

    value:设置属性的值

    writeable:值是否可以重写

    enumerable:目标是否可以被枚举

    configurable:目标属性是否可以被删除或是否可以再次修改特性


文章作者: linxueya
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 linxueya !
评论
  目录
喜迎
春节