JavaScript 内容总结(二)构造函数和原型

JavaScript 内容总结

1. 构造函数和原型
2. 继承
3. ES5中的新增方法

1.

构造函数和原型

• 构造函数：用来初始化对象，即为对象成员变量赋初始值，它总与new一起使用。我们可以把对象中一些属性和方法抽取出来，然后封装到这个函数里面

  new 在执行时会做四件事情

  1. 在内存中创建一个新的空对象
  2. 让this指向这个新的对象
  3. 执行构造函数里面的代码，给这个新对象添加属性和方法
  4. 返回这个新对象（所以构造函数里面不需要return）

  静态成员：在构造函数本身上添加的成员，只能由构造函数本身来访问

  function Star(username,age){
      this.username=username
      this.age=age
  }
  var ldh = new Star('刘德华',12)
  Star.sex = '男';
  console.log(Star.sex)//男
  console.log(ldh.sex)//undefined
  

  实例成员：在构造函数内部创建的对象成员，只能由实例化的对象来访问

  function Star(username,age){
      this.username=username
      this.age=age
  }
  var ldh = new Star('刘德华',12)
  console.log(ldh.username)//刘德华
  console.log(Star.username)//undefined
  

• 构造函数的问题：存在浪费内存的问题

  new 一个对象就需要新开辟一个内存，但是构造函数里面的有的方法明明相同，所以就会产生内存浪费

  解决方法：用原型解决，prototype

• 构造函数原型 prototype

  构造函数通过原型分配的函数是所有对象所共享的

  原型是什么？对象

  作用：共享方法

  function Star(username,age){
      this.username=username
      this.age=age
  }
  Star.prototype.sing=function(){
      console.log('我会唱歌')
  }
  var ldh = new Star('刘德华',12)
  var zxy = new Star('张学友',12)
  zxy.sing();
  ldh.sing();
  

• 对象原型 __ proto __

  对象都会有一个属性 __ proto __ 指向构造函数的prototype原型对象，之所以我们对象可以使用构造函数prototype 原型对象属性和方法，就是因为对象由 __ proto __ 原型的存在

• constructor 构造函数

  对象原型（__ proto __）和构造函数（prototype）原型对象里面都有一个属性 constructor属性， constructor我们称为构造函数，因为它指向构造函数本身

  function Star(uname, age) {
    this.uname = uname
    this.age = age
  }
  
  //下面这两个方法是Star的静态成员，按理说是不能用实例化对象调用的
  //但是因为方法定义到Star的原型上，并且实例化的对象身上存在__proto__对象属性，指向了Star的原型对像，所以可以调用
  
  //第一种方式，添加
  // Star.prototype.sing = function () {
  //   console.log('我会唱');
  // }
  // Star.prototype.movie = function () {
  //   console.log('我会演');
  // }
  
  //第二种方式，赋值替换
  Star.prototype = {
    constructor: Star,//指回原来的构造函数，不指回原来的构造函数，就会返回Object的构造函数，详见原型链
    sing() {
      console.log('我会唱');
    },
    movie() {
      console.log('我会演');
    }
  }
  
  const ldh = new Star('刘德华', 12);
  const zxy = new Star('张学友', 12);
  ldh.sing();
  zxy.movie();
  console.log(Star.prototype);
  console.log(ldh.__proto__);
  console.log(Star.prototype.constructor);
  console.log(ldh.__proto__.constructor);
  

• 原型链

• Javascript 的成员查找机制（规则）

  1. 当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性
  2. 如果没有就查找它的原型（也就是__ proto __ 指向的prototype 原型对象）
  3. 如果还没有就查找原型对象的原型（Object的原型对象）
  4. 以此类推一直找到Object为止（null）

• this指向问题

  谁调用指向谁

• 扩展内置对象

  可以通过原型对象，对原来的内置对象进行扩展自定义的方法，比如给数组增加自定义求偶数和的功能

  Array.prototype.sum = function () {
    var sum = 0;
    for (let i = 0; i < this.length; i++) {
      if (i % 2 == 0) {
        sum += this[i];
      }
    }
    return sum;
  }
  const arr = new Array(11, 22, 33);
  console.log(arr.sum());//44
  

2.

继承

组合继承（ES6之前）：构造函数+原型对象

• call();

  1. 可以调用函数
  2. 可以改变这个函数的this指向

  function fn(x, y) {
    console.log('hello');
    console.log(this);
    console.log(x + y);//3
  }
  var o = {
    name: 'andy'
  }
  // 调用函数
  // fn.call();//this指向window
  
  
  // 调用函数 并通过第一个参数改变this指向
  fn.call(o, 1, 2);//this指向o 1->x 2->y
  

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

  核心原理：通过call()把父类型的this指向子类型的this，这样就可以实现子类型继承父类型的属性

  function Father(uname, age) {
    this.uname = uname
    this.age = age
  }
  Father.prototype.money = function () {
    console.log(111);
  }
  function Son(uname, age) {
    Father.call(this, uname, age)
  }
  Son.prototype = new Father();
  Son.prototype.constructor = Son;
  
  Son.prototype.exam = function () {
    console.log('我要考试');
  }
  
  const son = new Son('刘德华', 12);
  console.log(Son.prototype);
  console.log(Father.prototype);
  

  

ES6之后 通过类 实现面向对象编程

构造函数的特点：

1. 构造函数有原型对象那个prototype
2. 构造函数原型对象prototype 里面有constructor 指向构造函数本身
3. 构造函数可以通过原型对象添加方法
4. 构造函数创建的实例对象有__ proto __ 原型 指向构造函数的原型对象

类的特点：同上，所以说类就是构造函数的简便写法，是构造函数的语法糖

3.

ES5中的新增方法

• 数组方法

  迭代（遍历）方法：forEach()、map()、filter()、some()、every();

  1. forEach()

     array.forEach(function(currentValue,index,arr))

     • currentValue：数组当前项的值
     • index：数组当前项的索引
     • arr：数组对象本身

     var arr = [1, 2, 3]
     var sum = 0
     arr.forEach((k, index, arr) => {
       sum += k;
       console.log(index);
       arr = arr.reverse()
       console.log(arr);
     })
     console.log(sum);
     

  

  2. map()：返回一个新数组

     array.map(function(currentValue,index,arr))

     • currentValue：数组当前项的值
     • index：数组当前项的索引
     • arr：数组对象本身

     var arr = [1, 22, 3]
     var newarr = arr.map((k, index, arr) => {
       return k * 20
     })
     console.log(newarr);//[20,440,60]
     

  3. filter()：返回一个满足条件的新数组，用于筛选工作

     array.filter(function(currentValue,index,arr))

     • currentValue：数组当前项的值
     • index：数组当前项的索引
     • arr：数组对象本身

     var arr = [1, 22, 3]
     var newarr = arr.filter((k, index, arr) => {
       return k >= 20
     })
     console.log(newarr);//[22]
     

  4. some()：返回布尔值，查找数组中是否有满足条件的元素，找到第一个满足条件的元素则终止循环

     array.some(function(currentValue,index,arr))

     • currentValue：数组当前项的值
     • index：数组当前项的索引
     • arr：数组对象本身

     var arr = [1, 22, 3]
     var flag = arr.some((k, index, arr) => {
       console.log(k);//1,22
       return k > 20
     })
     console.log(flag);//true
     

  5. every()：同some一致

• 字符串方法

  trim() :方法去除字符串两侧空格

• 对象方法

  Object.defineProperty() 定义新属性或修改原有的属性

  Object.defineProperty(obj，prop，descriptor)

  Object.defineProperty() 第三个参数descriptor 说明：以对象形式 { } 书写

  • value：设置属性值，默认为undefined
  • writable：值是否可以重写，true|false 默认False
  • enumerable：目标属性是否可以被枚举，true|false 默认False
  • configurable：目标属性是否可以被删除或是否可以再次修改特性 true|false 默认False

  var obj = {
   id: 1,
   pname: '小米',
   price: 1999
  };
  Object.defineProperty(obj, 'num', {
   enumerable: false,//是否允许被遍历出来
   value: 1000
  })
  console.log(obj);
  
  Object.defineProperty(obj, 'pname', {
   value: '华为'
  })
  console.log(obj);
  
  Object.defineProperty(obj, 'id', {
   writable: false
  })
  obj.id = 2;
  console.log(obj);
  
  Object.defineProperty(obj, 'address', {
   enumerable: true,//是否允许被遍历出来
   value: '吉林',
   configurable: true//是否允许被删除或修改
  })
  delete obj.address
  console.log(obj);
  console.log(Object.keys(obj));