原型
prototype
prototype 其实是function 对象的一个属性
prototype是定义构造函数熬出来的每个对象的公共祖先

  1. function Car(){
  2. vat this = {
  3. __proto__:Car.prototype
  4. }
  5. }
  6. let car = new Car()

因为js不想给别人修改,所以 构造函数里面的this 不是prototyoe 而是proto,在实例化之后可以在prototype来修改,proto也可以修改实例后的对象

  1. function Car (){
  2. var this = {
  3. __proto__:Car.prototype={name:'Mazda'}
  4. }
  5. }
  6. Car.prototype.name = 'Benz'
  7. console.log(car.name)

实例化的对象会把原来的Car 保存在construtor 里面,这个叫构造器

  1. function Car () {}
  2. Car.prototype.name = 'carName'
  3. let car = new Car()
  4. Car.prototype.name = 'benz'
  5. Car.prototype = {
  6. name:'tese'
  7. }
  8. console.log(car.name) // benz
  9. ------------------------分析----------------------------------------------------------
  10. 首先构造函数 有一个prototype的属性,是一个引用值
  11. carCar的实例,实例的过程是 Car 生成一个thisthis里面有一个keyprototype
  12. valueCar.prototype的属性,,
  13. return this 出去,car 赋值为一个 key__proto__valueCar.prototype的实例
  14. 重点: Car.prototype.name = 'benz' 改变了prototypename值,但是并没有改变引用,所以打印
  15. 的还是同一个引用值,
  16. Car.prototype = {
  17. name:'tese'
  18. } 改变了引用值,会导致Car.prototype 和原来的关联断开,虽然constructor
  19. 指向的构造函数Car 是改变了,但是不会改变实例前的引用值

prototype的会有自己的原型 在proto下保存自己construtor,一层一层的往上,那么顶端是 Object.prototype (注意不是object)

  1. // 经典 笔试题
  2. function Teacher() {}
  3. Teacher.prototype.tSkill = {
  4. name: 'java'
  5. }
  6. Teacher.prototype.num = 500
  7. let teacher = new Teacher()
  8. Student.prototype = teacher
  9. function Student() { }
  10. let student = new Student()
  11. student.tSkill.build = 'build'
  12. student.num++
  13. console.log(student, teacher); //
  14. // 引用值直接在 原型上修改和创建 , 基本值得 在对象上创建

原型可以更改,但是如果自己写的原型是不能读取到的,必须是js自己造的
image.png

还有就是如果是null的原型直接没有对象的方法,不存在proto

  1. let obj = Object.create(null)
  2. obj.num = 2

image.png

插件开发

为了不会污染全局变量,使用立即执行函数来处理

  1. (function(){})()
  2. (function(){})()
  3. // 会报错 加上分号
  4. (function(){})();
  5. (function(){})()
  6. //可以执行了
  7. //但是怕忘了打,都在前面打
  8. ;(function(){})()
  9. ;(function(){})()

插件案列

  1. ; (function () {
  2. let TComputed = function () { }
  3. TComputed.prototype = {
  4. mul: function (a, b) {
  5. return a * b
  6. },
  7. div: function (a, b) {
  8. return a / b
  9. },
  10. plus: function (a, b) {
  11. return a + b
  12. },
  13. minus: function (a, b) {
  14. return a - b
  15. }
  16. }
  17. window.TComputed = TComputed
  18. })()
  19. let computed = new TComputed()