JS高级 构造函数和原型 + 继承 + ES5新增方法

Posted 2021-07-19 鲸渔要加油

文章目录

• 构造函数和原型
• 一、原型
• • 1. 构造函数的原型
  • 2. 对象的原型
• 二、constructor
• 三、原型链的查找机制
• 四、this指向问题
• 五、扩展内置对象
• 六、继承
• • 1. call()
  • 2. 属性的继承
  • 3. 方法的继承
• 七、ES5 新增方法
• • 1. 数组方法
  • `forEach` 迭代（遍历）数组
  • `filter()` 迭代（遍历）数组
  • `some()` 迭代（遍历）数组
  • `some` 和 `forEach` 区别
  • 2. `trim` 方法去除字符串两端的空格
  • 3. 获取对象的属性名
  • 4. `Object.defineProperty` 新增或修改对象属性

构造函数和原型

一、原型

1. 构造函数的原型

每次实例化构造函数时，其中的 方法 都会开辟一个新的内存空间，所以我们将方法放在构造函数的 原型 上达到 共享方法 的效果

prototype

每个 构造函数 都有一个 原型 prototype 因为他是个对象，所以我们叫它 原型对象

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

Star.prototype.sing = function() {
	console.log('远近渔');
}

2. 对象的原型

因为 对象的原型 指向 构造函数的原型 所以我们才可以使用构造函数的 prototype 原型对象 的属性和方法
_proto_

二、constructor

原型对象 prototype 和 对象原型 __proto__ 都有一个 constructor 属性，它指回构造函数本身

如果我们给原型对象赋值的是一个对象，则必须手动的利用 constructor 指回原来的构造函数

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

 Star.prototype = {
   constructor: Star, // 手动设置指回原来的构造函数
   sing: function() {
     console.log('我会唱歌');
   },
   movie: function() {
     console.log('我会演电影');
   }
}
var zxy = new Star('张学友', 19);
console.log(zxy)

三、原型链的查找机制

任何对象都有原型对象，也就是 prototype 属性
任何原型对象也是一个对象，该对象就有 __proto__ 属性，这样一层一层往上找,就形成了一条链,我们称此为 原型链

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

四、this指向问题

构造函数 this 和 原型对象 this ，都指向我们 new 出来的 实例对象

五、扩展内置对象

往原来的数组内置对象里面新添了一个方法

Array.prototype.sum = function () {
    var sum = 0;
    for (var i = 0; i < this.length; i++) {
        sum += this[i];
    }
    return sum;
};

六、继承

1. call()

• call() 可以调用函数
• call() 可以修改this的指向
• fn.call(this指向, 传参1, 传参2)

 function fn(x, y) {  }
 var o = {  }
 fn.call(o, 1, 2)

2. 属性的继承

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

 function Son(uname, age, score) {
   // 用 call() 改变父函数的 this 指向
   Father.call(this, uname, age);
 }

3. 方法的继承

// 1. 父构造函数
 function Father(uname, age) {
   // this 指向父构造函数的对象实例
   this.uname = uname;
   this.age = age;
 }
 Father.prototype.money = function() {
   console.log(100000);
 };
 
 // 2 .子构造函数 
  function Son(uname, age, score) {
      // this 指向子构造函数的对象实例
      Father.call(this, uname, age);
      this.score = score;
  }
// Son.prototype = Father.prototype; 
// 原型对象指向关系，会让子原型对象的修改影响父原型对象
  Son.prototype = new Father();
// 如果利用对象的形式修改了原型对象,别忘了利用constructor 指回原来的构造函数
  Son.prototype.constructor = Son;

七、ES5 新增方法

1. 数组方法

forEach 迭代（遍历）数组

后面的 function(){} 是回调函数
相当于数组遍历的 for 循环，没有返回值

 var arr = [6, 8, 9];
 arr.forEach(function(value, index, array) {
       //参数一是:数组元素 6
       //参数二是:数组元素的索引 0
       //参数三是:当前的数组 6, 8, 9
 })

filter() 迭代（遍历）数组

主要用于筛选数组
返回值是一个新数组

  var arr = [12, 66, 4, 88, 3, 7];
  var newArr = arr.filter(function(value, index, array) {
  	 // 参数同 forEach
     return value >= 20;
     // 大于 20 的会被选出来
  });

some() 迭代（遍历）数组

用于检查数组是否有满足条件的元素
返回一个布尔值 true or false
找到第一个满足条件的就返回 true 并终止

 var arr = [10, 30, 4];
 var flag = arr.some(function(value, index, array) {
	// 参数同上
     return value < 3;
  });

some 和 forEach 区别

• 如果查询数组中唯一的元素, 用 some 方法更合适,在 some 里面遇到 return true 就是终止遍历，迭代效率更高
• 在 forEach 里面 return 不会终止迭代

2. trim 方法去除字符串两端的空格

var str = '   hello   '
console.log(str.trim()）  // 去除两端空格
var str1 = '   he l l o   '
console.log(str.trim()）  //he l l o  去除两端空格

3. 获取对象的属性名

Object.keys(对象) 获取到当前对象中的属性名 ，返回值是一个数组，类似于 for...in

 var obj = {
     id: 1,
     pname: '小米',
     price: 1999,
     num: 2000
};
var arr = Object.keys(obj)
console.log(arr) // 结果是 [id，pname,price,num]

4. Object.defineProperty 新增或修改对象属性

Object.defineProperty(obj, prop, descriptor)

• obj ：必写，目标对象
• prop：必写，修改的属性的名字，加引号
• descriptor：必写，目标属性所拥有的特性
  以对象形式书写
  value 设置属性的值，默认为 undefined
  writable 值是否可以重写， true可以，默认false不可以
  enumerable 属性是否可以被枚举（是否可以遍历出来），true可以，默认false不可以
  configurable 属性是否可以被删除或是否可以再次修改特性（就是false之后不能再改为true，特性只能被设置一次），true可以，默认false不可以

var obj = {
    uname: '远近渔',
    age: 18,
}

Object.defineProperty(obj, 'yuyu', {
    value: '可爱',
    writable: false, // 重写
    enumerable: false, // 枚举
    configurable: false // 删除和特性
})