JS原型

1. js 获取原型的方法?

p.__proto__  :
      (非标准方法,是浏览器实现的,__proto__ 指向 构造函数的原型)
p.constructor.prototype  :
      (由于原型链的关系,p 里虽然没有constructor,但是其原型上有,
      而 constructor 又指向了构造函数,函数都有prototype属性,该属性又指向了该构造函数的原型)
Object.getPrototypeOf(p)

2. 原型链:

  • 每个函数(构造函数) 都有 prototype 属性,该属性指向 该构造函数的原型对象(该属性为引用对象)
  • 每个引用对象,都有一个 隐藏属性 __proto__,该属性 指向 该对象的构造函数的 prototype 属性。
a.__proto__ === A.prototype; // a.__proto__指向 a 的构造函数(即 A)的原型对象
A.prototype.__proto__ === Object.prototype; // A 的原型对象 的 __proto__ 指向 Object的构造函数的原型对象
/* 因为 A的原型对象 的构造函数为 Object */

3. new 一个对象的过程?

  1. 创建一个新对象 son
  2. 新对象的__proto__ 指向 构造函数的原型

    son.__proto__ = Mother.prototype

  3. 改变 this 指向

    Mather.call(son)

  4. 执行构造函数中的代码

    this.xxx = xxx;

  5. 如果函数没有返回值,就自动返回 该新对象

    return this;

// 第5步,由于 一般创建对象都是 new Mother(); 如果是new的会自动返回新对象
// 如果没有new,直接Mother(),那么必须在function Mother(){ } 里面加上 return this;
// 否则不会返回

4. instanceof 的作用?

// instanceof 运算符判断 对象的原型链上是否存在着 某个构造函数的 prototype 对象
// 实现:

function myInstanceof(left, right) {
  let proto = Object.getPrototypeOf(left), // 获取对象的原型
    prototype = right.prototype; // 获取构造函数的 prototype 对象

  // 判断构造函数的 prototype 对象是否在对象的原型链上
  while (true) {
    if (!proto) return false;
    if (proto === prototype) return true;

    proto = Object.getPrototypeOf(proto);
  }
}

JS原型

上一篇:js 循环精灵图案例


下一篇:CSS3+JS实现静态圆形进度条