《JavaScript继承与原型》课件

继承与原型JavaScript本课程将深入探讨JavaScript中的继承和原型机制，帮助你理解JavaScript对象模型的核心概念，并掌握各种继承模式的优缺点和实现方式我们将从基础概念开始，逐步深入，最终达到熟练运用JavaScript继承和原型链解决实际问题什么是继承？概念作用中的继承JavaScript继承是面向对象编程中的一个重要概念，继承可以提高代码的可重用性、可维护JavaScript使用原型链机制实现继承，它允许一个类（称为子类或派生类）继性和可扩展性，减少代码冗余，并促进这与传统的面向对象语言的继承机制有承另一个类（称为父类或基类）的属性代码模块化所不同和方法原型链继承基本原理优缺点原型链继承是通过将子类的原型指向父类的实例来实现继承的优点简单易懂缺点所有实例共享父类原型上的属性，修改子类可以使用父类原型上的属性和方法一个实例会影响其他实例；父类构造函数无法传递参数构造函数继承步骤1在子类构造函数中调用父类构造函数，并使用call或apply方法传递参数优点2解决了原型链继承中实例共享属性的问题，可以传递参数给父类构造函数缺点3无法继承父类原型上的方法，父类原型上的方法需要在子类中重新定义组合继承原型链子类原型指向父类原型构造函数子类构造函数调用父类构造函数寄生组合继承创建临时函数1创建一个临时函数继承父类原型设置子类原型2将子类原型指向临时函数的实例调用父类构造函数3在子类构造函数中调用父类构造函数原型属性和方法原型属性定义在原型对象上的属性原型方法定义在原型对象上的方法访问方式通过实例对象或原型对象访问原型对象原型对象1属性2数据属性方法3方法属性原型链实例1原型23Object.prototype4nullObject.create12创建对象原型属性创建一个新对象，其原型为指定的原型对象继承原型对象上的属性和方法运算符instanceof判断实例判断一个对象是否为另一个对象的实例属性查找机制查找顺序查找停止先在自身查找，然后沿着原型链向上查找找到属性或到达原型链终点null停止属性屏蔽概念子类属性屏蔽父类同名属性解决方法使用不同的属性名或在子类中重新定义父类属性对象创建的几种方式字面量使用{}创建对象操作符new使用new操作符创建对象Object.create使用Object.create方法创建对象操作符new创建对象绑定this创建一个新对象将this绑定到新对象1234设置原型返回对象将新对象的原型设置为构造函数的原型返回新对象构造函数模式定义构造函数使用函数定义构造函数创建实例使用new操作符创建实例工厂模式工厂函数返回对象创建一个工厂函数来创建对象工厂函数返回创建的对象原型模式原型对象创建一个原型对象，包含共享的属性和方法创建实例创建新对象，并设置其原型为原型对象动态原型模式第一次实例化在构造函数中创建原型对象后续实例化直接使用已创建的原型对象寄生构造函数模式创建函数1创建一个函数来创建对象修改原型2修改函数的原型返回对象3返回创建的对象稳妥构造函数模式创建对象使用{}创建对象添加属性手动添加属性和方法返回对象返回创建的对象函数的属性prototypeprototype1属性2方法3对象的属性__proto__1访问原型访问对象的原型对象构造函数的显式原型设置原型可以通过构造函数的prototype属性设置原型对象实例的隐式原型访问原型原型链可以通过__proto__属性访问实例的原型对象实例的__proto__属性指向构造函数的prototype属性原型链的终点终点原型链的终点是Object.prototypeObject.prototypeObject.prototype没有原型对象，其原型为nullObject.getPrototypeOf获取原型1获取对象的原型对象替代__proto__2是__proto__属性的标准方法判断原型和实例的关系instanceof判断一个对象是否为另一个对象的实例isPrototypeOf判断一个对象是否是另一个对象的原型hasOwnProperty检查属性1检查对象自身是否拥有某个属性不查找原型链2只检查对象自身，不查找原型链操作符in检查属性检查对象自身或原型链上是否存在某个属性查找原型链会查找原型链上的属性对象属性枚举循环for...in12Object.keys3Object.getOwnPropertyNames原型对象的陷阱1意外修改意外修改原型对象会影响所有实例2属性覆盖子类属性覆盖父类属性继承的实现方式原型继承构造函数继承组合继承通过原型链实现继承通过调用父类构造函数实现继承结合原型继承和构造函数继承原型继承的问题共享属性参数传递所有实例共享原型上的属性无法向父类构造函数传递参数借用构造函数继承的问题原型方法无法继承父类原型上的方法组合继承的问题两次调用1父类构造函数被调用两次寄生组合继承的优点高效1只调用一次父类构造函数避免重复2避免了组合继承中父类构造函数的重复调用寄生组合继承的实现创建临时函数创建一个临时函数继承父类原型设置子类原型将子类原型指向临时函数的实例调用父类构造函数在子类构造函数中调用父类构造函数语法糖ES6class简化语法易于理解提供更简洁的语法来实现继承更易于理解和使用关键字class定义类使用class关键字定义类方法constructor构造函数1类的构造函数关键字extends继承类使用extends关键字继承其他类方法super调用父类构造函数1在子类构造函数中调用父类构造函数静态方法定义静态方法类方法使用static关键字定义静态方法不需要实例化即可调用总结与思考本课程讲解了JavaScript继承与原型的各种方法，从原型链继承到ES6的class语法，以及各种模式的优缺点比较希望大家能融会贯通，灵活运用。