1. 原型

prototype: 是构造函数的原型
proto: 存放原型的容器

2.原型链

  1. 沿着proto往上去找原型的属性,一层一层的去继承原型的属性这个链条称为原型链.
  2. 原型链的顶端是Object.prototype
  3. 原型本身也有原型
  4. 原型链上的增删改只能针对自身,不能针对上级
    1. function Car(){}
    2. var car = new Car();
    3. console.log(Car.prototype);
    4. // Car.prototype = {
    5. // constructor: f Car()
    6. // __proto__: Object
    7. // }
    image.png
  1. Professor.prototype.tSkill = 'Java';
  2. function Professor(){}
  3. var professor = new Professor();
  4. Teacher.prototype = professor;
  5. function Teacher(){
  6. this.mSkill = 'JS/JQ';
  7. }
  8. var teacher = new Teacher();
  9. Student.prototype = teacher;
  10. function Student(){
  11. this.pSkill = 'HTML/CSS';
  12. }
  13. var student = new Student();
  14. console.log(studennt);

image.png

  1. Professor.prototype.tSkill = 'JAVA';
  2. function Professor(){
  3. }
  4. var professor = new Professor();
  5. Teacher.prototype = professor;
  6. function Teacher(){
  7. this.mSkill = 'JS/JQ';
  8. this.students = 500;
  9. this.sucess = {
  10. alibaba: '28',
  11. tencent: '30'
  12. }
  13. }
  14. var teacher = new Teacher();
  15. Student.prototype = teacher;
  16. function Student(){
  17. this.pSkill = 'HTML/CSS';
  18. }
  19. var student = new Student();
  20. console.log(student.sucess);
  21. student.sucess.baidu = '100';
  22. student.students++;
  23. // 相当于student增加了一个students属性,然后+1 teacher里面无变化
  24. console.log(teacher, student);

image.png
引用值可以修改,原始值不可以。

访问对象的属性和方法时,优先查找自身的属性和方法,没有的话根据原型链一层一层的去查找。
this谁用指向谁
prototype实际上也是一个对象

3.对象继承

3.1 创建对象

  1. 字面量
  2. 构造函数创建 ```javascript var obj1 = {}; console.log(obj1);

var obj2 = new Object(); // 一般不用 conosle.log(obj2);

var Obj(){} var obj3 = new Obj();

console.log(obj3.proto === Obj.prototype);// true

  1. <a name="zihc0"></a>
  2. ## 3.2 Object.create(对象、null)
  3. 1. 当参数为null的时候可以创建没有原型的对象
  4. 1. Object.create 可以自己定制对象的原型
  5. ```javascript
  6. function Obj(){}
  7. Obj.prototype.num = 1;
  8. var obj1 = Object.create(Obj.prototype);
  9. var obj2 = new Obj();
  10. console.log(obj1, obj2)

3.3 不是所有的对象都继承于Object.prototype

  1. var obj = {};
  2. console.log(obj);// {}
  3. console.log(obj.__proto__); // {constructor:...,...}
  4. var obj1 = Object.create(null);
  5. // 里面不继承,因为这个对象没有原型
  6. console.log(obj1); // {}
  7. obj1.num = 1;
  8. console.log(obj1); // {num: 1}
  9. console.log(obj1.__proto__);// undefined
  10. console.log(obj1.num1);// 1
  11. var obj2 = Object.create(obj1);
  12. console.log(obj2);// {}
  13. console.log(obj2.__proto__); // undefined
  14. console.log(obj2.num); // 1

image.png

  1. var obj = Object.create(null);
  2. // 创建obj空对象
  3. obj.num = 1;
  4. var obj1 = {
  5. count: 2
  6. }
  7. // 给obj添加一个prototype为obj1
  8. obj.__proto__ = obj1;
  9. console.log(obj);
  10. var obj2 = {
  11. count: 3
  12. }
  13. console.log(obj2);// {count:3}
  14. console.log(obj.count);// undefined 因为obj原型是自造的 所以是无效的 __proto__必须是系统内置的。

image.png

3.4 undefined,null不能使用 toString()方法

  1. var num = 1 ;
  2. console.log(num.toString());
  3. // new Number(1).toStirng
  4. var num2 = new Number(num);
  5. console.log(num2.toString()); // 1
  6. // 这个是调用的自己toString方法
  7. // 原始值是没有属性的 只有引用值有属性
  8. // 但是可以通过包装类 将数字转换为数字对象 字符串转换为字符串对象
  9. // undefined null 不能通过包装类转换为对象
  10. // 因为它没有自己的原型就无法继承Object.prototyoe 也就无法使用toString

3.5document.write会打印对象的toString()方法

  1. var num = 1;
  2. var obj = {};
  3. var obj2 = Object.create(null);
  4. document.write(num); // 1
  5. document.write(obj); // [object Object]
  6. document.write(obj2); // 报错
  7. // 使用document.write必须经过toString()的转换
  8. // 而obj2压根就没有Object.prototype 因此无法使用其中的toString
  9. obj2.toString = function(){ // 可以手动添加toString方法
  10. return 'haha'
  11. }
  12. document.write(obj2);

3.6 通过Object.prototype.toString.call方法判断对象的类型

  1. var toString = Object.prototype.toString;
  2. var date = new Date();
  3. // [基本类型 引用类型]
  4. console.log(toString.call(1)); // [object Number]
  5. console.log(toString.call('1')); // [object String]
  6. console.log(toString.call(undefined)); // [object Undefined]
  7. console.log(toString.call(null)); // [object Null]
  8. console.log(toString.call([])); // [object Array]
  9. console.log(toString.call({})); // [object Object]
  10. console.log(toString.call(true));// [object Boolean]
  11. console.log(toString.call(/\d+/));// [object RegExp]
  12. console.log(toString.call(date));// [object Date]

3.7 call,apply更改this指向

  1. function Car(brand, color){
  2. this.brand = brand;
  3. this.color = color;
  4. }
  5. var newCar = {};
  6. // Car.call(newCar, 'Benz', 'red');
  7. Car.apply(newCar, ['Benz', 'red']);
  8. console.log(newCar);// {brand: 'Benz', color:'red'}

4.作业