javascript原型和继承

一、继承

function Person(name) {
  // 成员变量
  this.name = name;
}
// 成员方法
Person.prototype.eat = function () {
  console.log("吃饭")
};
// 静态变量
Person.age = 18;
// 静态方法
Person.sleep = function () {
  console.log("睡觉")
};


function Student(name, school) {
  //继承成员变量
  Person.call(this, name);
  this.school = school;
}
//继承成员方法(构造函数的prototype重新赋值时需要添加constructor属性)
//Object.create()方法创建一个新对象,使用现有的对象(Person.prototype)来提供新创建的对象({})的__proto__
Student.prototype = Object.create(Person.prototype);
Object.defineProperty(Student.prototype, 'constructor', {
  value: Student,
  enumerable: false
});
Student.prototype.study = function () {
  console.log("学习")
};
//继承静态变量和方法
Student.__proto__ = Person;
Student.level = '7年级';
Student.game = function () {
  console.log("游戏")
};

// 测试静态变量和方法的继承
console.dir(Student);
console.log(Student.age);//18
Student.sleep();//睡觉
console.log(Student.level);//7年级
Student.game();//游戏
// 测试成员变量和方法的继承
let stu = new Student('孟美岐', '江南大学');
console.log(stu);
console.log(stu.name);//孟美岐
stu.eat();//吃饭
console.log(stu.school);//江南大学
stu.study()//学习

1、构造函数的属性放在对象上,函数放在原型上;

2、继承属性【Person.apply(this,[name]);】,继承方法【Student.prototype=Object.create(Person.prototype);】;

二、原型

/*
构造函数有一个prototype属性,对象有一个__proto__属性;
对象的__proto__指向构造函数的prototype;
构造函数的prototype有一个constructor属性;

当访问一个对象的属性的时候,首先在这个对象本身进行查找,
如果找到,就直接返回这个属性,且停止查找。
如果没找到,会继续在原型上找,也就是__proto__指向的那个对象。
*/
console.log(student.__proto__==Student.prototype);//true
console.log(student.__proto__.__proto__==Person.prototype);//true
console.log(student.__proto__.__proto__.__proto__==Object.prototype);//true
console.log(student.__proto__.__proto__.__proto__.__proto__);//null

三、原型三角图

四、设置原型对象

function Person(pname) {
  this.pname = pname
}

//当重新设置构造函数的prototype,一定要重新设置constructor属性
//如果要访问原型对象的成员,必须先设置原型对象,再使用构造函数创建对象
Person.prototype = {
  constructor: Person,
  setPname: function (pname) {
    this.pname = pname
  },
  getPname: function () {
    return this.pname
  }
}

//内置对象的prototype为只读属性,不能修改
Array.prototype = {}
原文地址:https://www.cnblogs.com/linding/p/12530365.html