FE.ES-理解ECMA Javascript的原型

最新推荐文章于 2024-07-17 20:19:26 发布

weixin_33909059

最新推荐文章于 2024-07-17 20:19:26 发布

阅读量123

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000017288340

版权

名词解析

字面量
对象字面量 var a = {};
数组字面量 var arr = [1,2,3];
正则表达式字面量 var reg = /[a-z]/g;

属性描述符

configurable:fasle是一个单向操作,同时阻止使用 delete 操作符移除既存属性的能力。
enumerable控制是否在属性枚举操作中出现，比如 for..in 循环。
writeable:false时，会阻止同名属性在 [[Prototype]] 链的低层被创建（遮蔽）。不能使用 = 赋值，而必须使用 Object.defineProperty(..)
如果一个 foo 在 [[Prototype]] 链的高层某处被找到，而且它是一个 setter，那么这个 setter 总是被调用。没有 foo 会被添加到（也就是遮蔽在）myObject 上，这个 foo setter 也不会被重定义。
对象常量： writable:false 与 configurable:false 组合
防止扩展： Object.preventExtensions(..)
封印： Object.seal(..) 等同于防止扩展+configurable:false
冻结： Object.freeze(..) 等同于封印+writable:false

例：创建一个可写的,可枚举的,可配置的属性p

var o2 = {};
Object.defineProperties(o2, {
  'p': {value: 2,   writable: true,  enumerable: true,  configurable: true },
});
Object.getOwnPropertyDescriptor( o2, "p" );

o2 = Object.create({}, {
  p: {value: 2,  writable: true,   enumerable: true,   configurable: true },
});
o2.hasOwnProperty( "p" )

原型

prototype（显式原型）
所有的函数默认都会得到一个公有的，不可枚举的属性，称为 prototype，它可以指向任意的对象。__proto__是每个对象都有的一个属性，而prototype是函数才会有的属性。(通过Function.prototype.bind方法构造出来的函数是个例外，它没有prototype属性。)

[[Prototype]]（隐式原型，非标准写法__proto__）
如果默认的 [[Get]] 操作不能直接在对象上找到被请求的属性，那么它会沿着对象的 [[Prototype]] 链继续处理。
所有的对象(包括函数)都有一个私有属性（b.__proto__）指向它的原型对象（Foo.prototype）。该原型对象也有一个自己的原型对象(Object.__proto__) ，层层向上直到一个对象的原型对象为null。其中，下面3种隐式原型表述在本文中相同

Person.__proto__ 非标准
Object.getPrototypeOf(Person) 标准
[[Prototype]] 概念

原型图解

1.首先了解内置对象

基本内置对象 String ,Number ,Boolean ,Object ,Function ,Array
其他内置对象 Date,RegExp,Error

这些对象的[[Prototype]]都指向Function.prototype（Object.getPrototypeOf(String) === Function.prototype）
Function.prototype是唯一一个typeof Xxx.prototype==='function'的prototype。其它的构造器的prototype都是'object'.

Object.prototype.constructor   === Object
Object.prototype.__proto__     === null

Function.prototype.constructor === Function
Function.prototype.__proto__   === Object.prototype

2.其次试着定义一个函数，看看发生什么

定义一个函数(function Foo)会创建原型对象(Object Foo.prototype)。
constructor(构造器) 是在前面用 new 关键字调用的任何函数。

function Foo(){}
Foo.__proto__             === Function.prototype

Foo.prototype.constructor === Foo//function Foo(){}
Foo.prototype.__proto__   === Object.prototype

3.接着new一下，也许应该叫委托

new会沿者 [[Prototype]] 链向上找到.constructor
new Foo() 得到一个新对象（我们叫他 a），这个新对象 a 内部地被 [[Prototype]] 链接至 Foo.prototype 对象。

var b = new Foo()//new作用：构建一个被链接到另一个对象的对象，外加这个函数要做的其他任何事。
b.__proto__===Foo.prototype

4.instanceof 和原型链什么关系

object instanceof constructor用于测试constructor.prototype是否出现在object的原型链中的任何位置。

//像这样
object.__proto__===constructor.prototype?
object.__proto__.__proto__===constructor.prototype?
object.__proto__.__proto__.__proto__===constructor.prototype?
...

b instanceof Foo//true
b instanceof Object//true

Foo.prototype.isPrototypeOf(b)//true
Object.prototype.isPrototypeOf(b)//true

Foo.prototype = {};
b instanceof Foo//false
b instanceof Object//true
Foo.prototype.isPrototypeOf(b)//false
Object.prototype.isPrototypeOf(b)//true

‘类’与‘继承’

ES5

大家模拟了很多继承的方法，但本质上都是两种的变体：

1.原型继承

原型继承，本质是两个对象间建立链接，一个对象将对属性/函数的访问委托到另一个对象上。
1.1使用 new

// 假设有一个需要继承的一个类型 Animal
function Cat() {}
Cat.prototype = new Animal
// 添加一个属性
Cat.prototype.name = 'cat'

Bar.prototype = new Foo() 确实创建了一个新的对象，这个新对象也的确链接到了我们希望的Foo.prototype。但是，它是用 Foo(..) “构造器调用”来这样做的。如果这个函数有任何副作用（比如logging，改变状态，注册其他对象，向 this添加数据属性，等等），这些副作用就会在链接时发生（而且很可能是对错误的对象！），而不是像可能希望的那样，仅最终在 Bar()的“后裔”被创建时发生。
于是，我们剩下的选择就是使用 Object.create(..) 来制造一个新对象，这个对象被正确地链接，而且没有调用 Foo(..)时所产生的副作用。一个轻微的缺点是，我们不得不创建新对象，并把旧的扔掉，而不是修改提供给我们的默认既存对象。

1.2使用Object.create()

function Shape() {this.x = 0;this.y = 0;}// 父类
Shape.prototype.move = function(x, y) {this.x += x;this.y += y;};// 父类的方法

function Rectangle() {Shape.call(this);} //子类

Rectangle.prototype = Object.create(Shape.prototype);// 子类续承父类
Rectangle.prototype.constructor = Rectangle;

var rect = new Rectangle();
  rect instanceof Rectangle; // true
  rect instanceof Shape; // true

Object.create()做了什么？

Object.create=function (o){
    function F() {}
    F.prototype = o;
    return new F();
}

两种操作将Bar.prototype 链接至 Foo.prototype：

// ES6 以前
// 扔掉默认既存的 `Bar.prototype`
Bar.prototype = Object.create( Foo.prototype );

// ES6+
// 修改既存的 `Bar.prototype`
Object.setPrototypeOf( Bar.prototype, Foo.prototype );

2.构造继承

构造继承，为了符合表面上我们用 new 调用它，而且我们观察到它“构建”了一个对象。
本质是因为 new 让函数调用变成了“构造器调用”

// 假设有一个需要继承的一个类型 Animal
function Cat(name){
  Animal.call(this)
  // 添加一个属性
  this.name = name || 'cat'
}

如何检查“类”继承/自省：

错误方法：a instanceof Foo
instanceof 只能查询 a 的“祖先”。

勉强正确方法：用来检查 o1 是否关联到（委托至）o2 的帮助函数

function isRelatedTo(o1, o2) {
    function F(){}
    F.prototype = o2;
    return o1 instanceof F;
}

正确方法：Foo.prototype.isPrototypeOf( a )
isPrototypeOf(..) 回答的问题是：在 a 的整个 [[Prototype]] 链中，Foo.prototype 出现过吗？

3.原型继承+构造函数继承

function A(name){  this.name=name; }
A.prototype.sayName=function(){ console.log(this.name); }
function B(age){ this.age=age; }

//原型继承
B.prototype=new A("mbj");  //被B的实例共享
var foo=new B(18);
foo.age;    //18,age是本身携带的属性
foo.name;   //mbj，等价于foo.__proto__.name
foo.sayName(); //mbj,等价于foo.__proto__.proto__.sayName()
foo.toString();  //"[object Object]",等价于foo.__proto__.__proto__.__proto__.toString();
//构造函数继承

原型继承缺点：
1.所有子类共享父类实例，如果某一个子类修改了父类，其他的子类在继承的时候，会造成意想不到的后果。
2.构造子类实例的时候，不能给父类传递参数。

//构造函数继承，避免了原型继承缺点
function B(age,name){  this.age=age;A.call(this,name); }
var foo=new B(18,"wmy");
foo.name;     //wmy
foo.age;      //18
foo.sayName();   //undefined

构造函数继承缺点：
1.父类的prototype中的函数不能复用

//原型继承+构造函数继承
function B(age,name){  this.age=age;A.call(this,name); }
B.prototype=new A("mbj");
var foo=new B(18,"wmy");
foo.name;     //wmy
foo.age;      //18
foo.sayName();   //wmy

结合了上述两种方式的优点，但占用空间更大。

ES6

在 ES2015/ES6 中引入了class关键字，但只是语法糖，JavaScript 仍然是基于原型的。
注意：函数声明会提升，类声明不会。

//类声明
class Rectangle {
    constructor(height, width,x, y) {this.height = height,this.width = width,this.x = x,this.y = y;}
    get area() {return this.calcArea()}
    calcArea() {return this.height * this.width;}
    static distance(a, b) {return Math.hypot(a.x - b.x, a.y - b.y);}
}
const square1 = new Rectangle(10, 10,5,5);
const square2 = new Rectangle(10, 10,6,6);
console.log(square1.area);
console.log(Rectangle.distance(square1 , square2 ));

//类表达式
let Rectangle = class Rectangle {constructor() {}};

extend 实现继承

class Rectangle extends Shape {
  move() {
    super.move();//super 关键字用于调用对象的父对象上的函数
  }
}

常规（非可构造）对象实现继承

var Animal = {};
class Cat {}
Object.setPrototypeOf(Cat.prototype, Animal);

混入（Mixin）
Object.assign(target, ...sources) 方法只会拷贝源对象(...sources)自身的并且可枚举的属性到目标对象(target)。

function MyClass() {
     SuperClass.call(this)
     OtherSuperClass.call(this)
}

// 继承一个类
MyClass.prototype = Object.create(SuperClass.prototype)
// 混合其它
Object.assign(MyClass.prototype, OtherSuperClass.prototype)
//Object.assign 会把  OtherSuperClass原型上的函数拷贝到 MyClass原型上，
//使 MyClass 的所有实例都可用 OtherSuperClass 的方法

// 重新指定constructor
MyClass.prototype.constructor = MyClass
MyClass.prototype.myMethod = function() {}// do a thing

当继承的函数被调用时，this 指向的是当前继承的对象，而不是继承的函数所在的原型对象。

var o = {
  a: 2,
  m: function(){
    return this.a + 1;
  }
};
var p = Object.create(o);
// p是一个继承自 o 的对象

p.a = 4; // 创建 p 的自身属性 a
console.log(p.m()); // 5

派生

class MyArray extends Array {
  static get [Symbol.species]() { return Array; }
}

面向委托的设计

var Widget = {
    init: function(width,height){
        this.width = width || 50;
        this.height = height || 50;
        this.$elem = null;
    },
    insert: function($where){
        if (this.$elem) {
            this.$elem.css( {
                width: this.width + "px",
                height: this.height + "px"
            } ).appendTo( $where );
        }
    }
};

var Button = Object.create( Widget );

Button.setup = function(width,height,label){
    // delegated call
    this.init( width, height );
    this.label = label || "Default";

    this.$elem = $( "<button>" ).text( this.label );
};
Button.build = function($where) {
    // delegated call
    this.insert( $where );
    this.$elem.click( this.onClick.bind( this ) );
};
Button.onClick = function(evt) {
    console.log( "Button '" + this.label + "' clicked!" );
};

$( document ).ready( function(){
    var $body = $( document.body );

    var btn1 = Object.create( Button );
    btn1.setup( 125, 30, "Hello" );

    var btn2 = Object.create( Button );
    btn2.setup( 150, 40, "World" );

    btn1.build( $body );
    btn2.build( $body );
} );

Object.create 和 new 区别
 js中__proto__和prototype的区别和关系？
你不懂JS: this 与对象原型
 行为委托