prototype

anyway 发布于2019-08-20 18:56 / 3268人阅读

摘要：构造函数构造函数就是普通函数，为了和其他函数区别，第一个字母大写。左侧是实例对象，右侧是构造函数。打印猜测的过程如果建一条原型链，可以使用，只是没有构造函数，也不存在。

1. 构造函数：

构造函数就是普通函数，为了和其他函数区别，第一个字母大写。
特点：

1.内部使用this表示 实例对象。
2. 生成对象用new关键字

2. 构造函数，原型对象和实例对象的关系

const Anim = function (name) {
  this.name = name;
}

const cat = new Anim("cat");

内存图：

log验证：

console.log(cat.__proto__);// Anim{}
console.log(Anim.prototype);//Anim{}
console.log(Anim.prototype === cat.__proto__);// true

在node环境中Anim.prototype输出的是Anim{}，而在浏览器环境输出的更明白一些
截图

node环境还是有些问题的，建议不要在node环境测试。

3. 其他log

console.log(cat.__proto__);// Anim的prototype,含constructor的对象
console.log(cat.__proto__.__proto__);//Object的prototype,含constructor
console.log(cat.__proto__.__proto__.__proto__);//null

console.log(cat.__proto__);// Anim的prototype,含constructor的对象
console.log(cat.__proto__.__proto__);//Object的prototype,含constructor
console.log(cat.__proto__.__proto__.__proto__);//null

console.log(Anim.__proto__);// Function的prototype，一个含constructor的对象
console.log(Anim.__proto__.__proto__);// Object的prototype，含constructor的对象
console.log(Anim.__proto__.__proto__.__proto__);// null

4. Object.getPrototypeOf()

Object.getPrototypeOf(obj) 获取对象obj的原型对象相当于obj.__proto__，只是__开头的是内部属性，不建议使用，推荐使用Object.getPrototypeOf()

console.log(cat.__proto__);// Anim{}
console.log(Object.getPrototypeOf(cat));// Anim{}
console.log(Anim.__proto__);
console.log(Object.getPrototypeOf(Anim));// [Function]

5. constructor

原型对象prototype对象有一个constructor属性，指向构造函数对象，而构造函数对象有个prototype属性指向原型对象。

console.log(Anim.prototype.constructor === Anim);// true

因为constructor在原型对象上，所以所有的实例对象都有constructor属性，而且都等于Anim.cat本身没有constructor属性，constructor是其原型链上的属性。

console.log(cat.constructor === Anim.prototype.constructor);// true
console.log(cat.constructor === Anim);// true

constructor的作用1：判断实例对象属于哪个构造函数

function Cat(){}

function Dog(){}

function isDog(obj){
  return obj.constructor === Dog;
}

const black = new Cat();
const white = new Dog();
console.log(isDog(black));// false
console.log(isDog(white));// true

constructor的作用2：实例对象可以调用构造函数

const yellow = new white.constructor();
console.log(isDog(yellow));// true

constructor和prototype都是关联原型对象和构造函数的纽带，二者不可只改其一，必须同时修改。 6. instanceof

console.log(yellow instanceof Dog);

左侧是实例对象，右侧是构造函数。可能会想到原理是

yellow.constructor === Dog

除了使用constructor，还有Object.prototype.isPrototypeOf()，对象实例的isPrototypeOf方法，用来判断一个对象是否是另一个对象的原型

const date = new Date();

console.log(date instanceof Date);// true
console.log(date instanceof Object);// true

console.log(Date.prototype.isPrototypeOf(date));// true
console.log(Object.prototype.isPrototypeOf(date));// true

instanceof对整个原型链上的对象都有效，因此同一个实例对象，可能会对多个构造函数都返回true。

7. Object.create

const a = {
  name:"aaaa",
  log:function(){
    console.log(this.name);
  }
};

const b = Object.create(a);
b.name = "bbb";
const c = Object.create(b);
c.name = "ccc";

打印a,b,c

console.log(a.__proto__ === Object.prototype);// true
console.log(b.__proto__ === a);// true
console.log(c.__proto__ === b);// true

猜测create的过程

b.__proto__ = a;

如果建一条原型链，可以使用create，只是没有构造函数，也不存在prototype。

字面量对象没有prototype属性，无法使用new关键字创建实例对象。

var o = {
    name:"michael",
    age:10,
    say:()=>{
        console.log("hello");
    }
};

私有云云服务器 PROTOTYPING Prototypal Prototypes Prototype

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84914.html

高能！typeof Function.prototype 引发的先有 Function 还是先有 O

摘要：有个例外他就是。看左侧对象的原型链上是否有第一步得到。将各内置引用类型的指向。用实例化出，，以及的行为并挂载。实例化内置对象以及至此，所有内置类型构建完成。最后的最后，你还对是现有还是现有有想法了吗以上均为个人查阅及实践总结的观点。来个摸底测试，说出以下每个表达式的结果 function F(){}; var o = {}; typeof F; typeof o; typeof F...

娣辩孩 2019-08-19 18:33 评论0 收藏0
JavaScript中__proto__与prototype的关系

摘要：了解中原型以及原型链只需要记住以下点即可对象都有属性，指向构造函数的构造函数函数都有属性，指向构造函数的原型对象的内置构造函数可知所有的构造函数都继承于甚至包括根构造器及自身。了解JavaScript中原型以及原型链只需要记住以下2点即可对象都有__proto__属性，指向构造函数的prototype 构造函数函数都有prototype属性，指向构造函数的原型 1、对象的__p...

justjavac 2019-08-26 10:13 评论0 收藏0
浅谈javascript中的prototype

摘要：因此，请慎重重写原型继承说到就不得说继承，我们通过给上添加属性和方法，就能使该构造函数所有的实例对象拥有属性和方法。本人博客：【www.xiabingbao.com】在本文中，我们讲解prototype的内容主要由：什么是prototype，prototype与函数之间的关系，prototype与实例对象之间的关系，使用proto实现一个简单的继承。 1. prototype的简要...

seanHai 2019-08-21 10:33 评论0 收藏0
JS 原型及原型链学习

摘要：所以继承了对象的所有方法，当你用时，会先查一下它的构造函数的原型对象有没有有方法，没查到的话继续查一下的原型对象有没有这个方法。普通函数与构造函数的区别在命名规则上，构造函数一般是首字母大写，普通函数遵照小驼峰式命名法。在函数调用的时候： function fn() { } 构造函数：1. new fn( ) 2 .构造函数内部会...

PiscesYE 2019-08-26 13:58 评论0 收藏0
js中的prototype、__proto__、constructor

摘要：一旦原型对象被赋予属性和方法那么由相应的构造函数创建的实例会继承上的属性和方法为什么只有函数才有属性规范就这么定的。其它的构造器的都是一个对象。哪些对象有原型？所有的对象在默认情况下都有一个原型，因为原型本身也是对象，所以每个原型自身又有一个原型（只有一种例外，默认的对象原型在原型链的顶端） prototype属性prototype是每个函数对象都具有的属性，被称为原型对象，而__p...

fizz 2019-08-23 10:25 评论0 收藏0
Javascript面向对象编程（二）：构造函数的继承

摘要：动物还有一个猫对象的构造函数。这显然会导致继承链的紊乱明明是用构造函数生成的，因此我们必须手动纠正，将对象的值改为。这是很重要的一点，请务必注意如果替换了对象，下一步必然是为新的对象加上属性，并将这个属性指回原来的构造函数。原文链接现在有一个动物对象的构造函数。 function Animal() { this.species = 动物; } 还有一个猫对象的构造函数。 fun...

longmon 2019-08-20 14:41 评论0 收藏0