一文彻底搞懂原型,原型链,继承,面试必备

252 阅读1分钟

原型:任何函数都有prototype属性

prototype是英语“原型”的意思,prototype属性值是个对象,它默认拥有constructor属性指回函数

普通函数来说的prototype属性没有任何用处,

而构造函数的prototype属性非常有用,构造函数的prototype属性是它的实例的原型

function fun() {
     return a + b;
  }
   console.log(fun); //function fun()
   console.log(fun.prototype); //Object { … }
   console.log(typeof fun.prototype); //object 
   console.log(fun.prototype.constructor === fun); //true
  • 构造函数的prototype属性是他实例的原型
function Person(name, age) {
    this.name = name;
    this.age = age;
  }
   var xiaoming = new Person('小明', 23);
   console.log(xiaoming.__proto__ === Person.prototype);
  • 原型链查找:实例可以打点访问它的原型的属性和方法
function People(name, age) {
   this.name = name;
   this.age = age;
// 把方法直接写在实例上,每个实例和每个实例的方法函数都是内存中不同的函数,造成了内存浪费
//解决办法:把方法写到prototype
   //this.sayhello = function() {
       // console.log(`${this.name}今年${this.age}哈哈哈sui了`);
       // }
     }
    People.prototype.nationality = '中国';
    People.prototype.growup = function() {
    console.log(`${this.name}今年${this.age}哈哈哈sui了`);
     this.age++;
   }
   People.prototype.sayAge = function() {
      console.log(`我叫${this.name},我今年${this.age}岁了`);
     }
      var xiaohong = new People('小红', 33);
      console.log(xiaohong);
      console.log(xiaohong.nationality);
      var XIOBAI = new People('小白', 88);
  • 继承
        function fn(x, y) {
            console.log(this);
            console.log(x + y);
        }
        var o = {
            name: 'sss'
        }
        fn.call(o, 1, 2);
        //利用构造函数+call实现继承父类的属性
        function Father(score, grade) {
            this.score = score,
                this.grade = grade
        }
        Father.prototype.exam = function() {
                console.log('考了100分');
            }
            //利用原型对象继承方法
        Son4.prototype = new Father();

        function Son4(score, grade) {
            Father.call(this, score, grade)
        }
        var wjz = new Son4(22, '十班');
        console.log(wjz.exam());