原型、原型对象、构造函数、原型链理解

1. 基本概念:

“原型属性”也可以叫做“原型”(prototype):所有函数都有prototype,我觉得可以理解为python中的类属性,不需要通过实例,直接用类(es5就是函数名)可以调用,下面列举了三种创建函数的方法,函数创建后都有prototype属性,prototype指向“原型对象”。

// 函数声明
function F1() {
};
// 表达式定义
let F2 = function () {
};
// 函数构造
let F3 = new Function(‘n1‘, ‘n2‘, ‘return n1+n2‘);

console.info(F1.prototype)    //F1 {}
console.info(F2.prototype)    //F2 {}
console.info(F3.prototype)    //anonymous {}

原型对象(prototype所指向的对象):这玩意主要就是用来继承用的,包含实例的方法和属性。说白了也就是一个对象,用来定义函数对象的属性、方法,默认情况下它包含一个constructor属性,如果你重新定义可以覆盖constructor属性。

原型对象与构造函数配合一起,就形成一个类了,然后构造函数接收每次初始化对象的初始值,原型对象就提供类模板。而在其他java、python中都写在class中,当然es6也加入了class;以下的简单代码帮助理解上面说的,定义一个动物类,根据构造函数创造不同的动物,如果需要创建特殊动物,可以继承然后添加一些特殊属性、方法再创建。---------总结es5的类可以用“构造函数+构造函数的prototype”来定义,类的对象使用“new构造函数”来生成。

// 构造函数
let Animal = function (name) {
    this.name = name
}
// 原型对象定义
Animal.prototype.getAnimal = function () {
    return this.name
}
// 创建对象,会继承Animal.prototype
let dog = new Animal(‘dog‘)
let cat = new Animal(‘cat‘)
console.info(dog.getAnimal())
console.info(cat.getAnimal())

上图展示了构造函数、原型对象、具体对象的属性、方法及属性值。

普通对象与函数对象:通过函数对象 new一下可以得到普通对象,把函数对象理解为类,普通对象为实例。如下代码加强理解,可以看到函数对象new完以后生产的对象是object;函数对象中都有prototype前面已经说过了(为什么函数对象中会有这个属性以后读取更深以后再解答)

// Animal函数对象
let Animal = function (name) {
    this.name = name
}
// 原型对象
Animal.prototype.getAnimal = function () {
    return this.name
}
// 通过函数对象创建普通对象
let dog = new Animal(‘dog‘)
console.info(typeof dog)    //object

总结: 函数对象通过new Function()可以得到,Function对象可以构造函数对象。而函数对象又可以new一个普通对象出来。

__proto__:所有对象都有__proto__这个属性,这个属性指向对应“函数对象(就理解为类)”的prototype,这也是实现原型链的根本,在书中一般都用[[prototype]]。

构造函数和constructor属性:其实前面的图已经标注了,概念后续补上。

原型链:ES中的继承主要用原型链来实现,记住了这玩意主要用来实现继承。其基本思想是:利用原型让一个引用类型继承另一个引用类型的属性和方法(js高级程序设计说的),还是用以上的例子来说明

let Animal = function (name) {
    this.name = name
}
// 原型对象定义
Animal.prototype.getAnimal = function () {
    return this.name
}
// 创建对象,会继承Animal.prototype
let dog = new Animal(‘dog‘)
let cat = new Animal(‘cat‘)
console.info(dog.valueOf())
console.info(cat.valueOf())

跟上面例子就差了最后console打印部分,我们定义的Animal没有写valueof()为什么可以调用这个方法呢?到底是什么鬼?这就是原型链搞的鬼。我再把上面的图形完善一下

上图还有两个属性的指向没有画,第一、Animal的__proto__指向;第二、Animal.prototype的__proto__指向。

这个图把Animal.prototype的__proto__指向添加了,

图形说明:

1. Animal.prototype是个普通对象,ES中Object是所有对象的基础。所有引用类型都继承了Object;所有函数的默认原型是都Object的实例,因此Animal.prototype的__proto__指向Object.prototype,这个一定要理解。

2. 我们调用cat.valueOf()解释器会先找dog实例中有没有这个方法,没有就在Animal.prototype中查找,没有再去Object.prototype中查找。然后就有了cat.valueOf()的运行结果:Animal { name: ‘cat‘ }。

3. Object构造函数的prototype也指向Object.prototype。

原文地址:https://www.cnblogs.com/caoyi/p/10166831.html

时间: 2024-10-07 11:23:03

原型、原型对象、构造函数、原型链理解的相关文章

MDN——javascript——入门——第三章对象——对象.构造函数.原型链.继承——知识点总结

对象Object 由属性property(变量).方法method(函数)组成 var objectName = { member1Name : member1Value, member2Name : member2Value, member3Name : member3Value } member(成员)的值是任意的, 一个如上所示的对象被称之为对象的字面量(literal)——手动的写出对象的内容来创建一个对象.不同于从类实例化一个对象,我们会在后面学习这种方式. 访问对象成员 1.点表示法

原型,对象和原型链

普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象. 原型对象 在JavaScript 中,每当定义一个对象(函数)时候,对象中都会包含一些预定义的属性.其中函数对象的一个属性就是原型对象 prototype.注:普通对象没有prototype,但有__proto__属性.优点:包含可以让所有实例共享的属性和方法缺点:省略了为构造函数传递初始参数:所有实例在默认情况下的参数一致 共享用途:面

秒懂javascript的原型(prototype)对象、原型链的前世今生

在上文中我们通过原型方式,解决了多个实例的方法共享问题,接下来,我们就来搞清楚原型(prototype),原型链的来龙去脉. function CreateObj(uName) { this.userName = uName; } CreateObj.prototype.showUserName = function(){ return this.userName; } var obj1 = new CreateObj('ghostwu'); var obj2 = new CreateObj('

原型、实例化、原型链

在使用面对对象编程时,对象间的继承关系自然少不了!而原型正是实现javascript继承的很重要的一种方法!JS的原型链只针对 对象,仅对象才具有的!!! function person(name, age) { this.name = name; this.age = age; } person.prototype.getInfo = function() { alert("My name is "+this.name+", and I have "+this.a

1--面试总结-js深入理解,对象,原型链,构造函数,执行上下文堆栈,执行上下文,变量对象,活动对象,作用域链,闭包,This

参考一手资料:http://dmitrysoshnikov.com/ecmascript/javascript-the-core/中文翻译版本:https://zhuanlan.zhihu.com/p/32042645 Javascript 是一种单线程编程语言,这意味着它只有一个调用栈,call Stack(调用栈 ,,先入后出) 核心:对象,原型链,构造函数,执行上下文堆栈,执行上下文,变量对象,活动对象,作用域链,闭包,This js原型链? 定义 原型对象也是简单的对象并且可以拥有它们自

面向对象(2 )构造函数 原型 原型链的理解

面向对象(2) 原型 原型链的理解 1.面向对象的目的就是生成对象object. 2.生成对象的方式 (1)单例模式(字面量定义)var obj={} (2)类的实例 var obj=new Object() (3)工厂模式 (4)构造函数 工厂模式和构造函数的区别? 工厂模式,生成的对象必须要返回,构造函数模式不用return,构造函数模式默认return旳是this,在构造函数内的this就是实例对象. 构造函数如果人为return的不是对象,直接忽略,如果人为return的是对象,就取代t

关于构造函数和原型prototype对象的理解

构造函数     1.什么是构造函数 构造函数,主要用于对象创建的初始化,和new运算符一起用于创建对象,一个类可以有多个构造函数,因为函数名相同,所以只能通过参数的个数和类型不同进行区分,即构造函数的重构, 如果没有定义构造函数,那么该类会自动生成一个空参数的构造函数. 在javascript中,对象创建有二种方式:对象字面量和使用new表达式. 对象字面量,每创建一个对象都要重新定义一次语句,不便于创建大量相同类型的对象 new表达式,配合构造函数使用,例如var person1 = new

javascript的构造函数和实例对象、prototype和__proto__的区别,原型对象及构造器的理解

一.前言 我们先通过代码来分别打印出实例对象.构造函数,以及修改了原型对象的构造函数,通过对比内部结构来看看他们之间的区别. //定义构造函数 function Person(name, age){ this.name = name; this.age = age; this.play = function(){ console.log('玩好玩的') } } //实例化对象,并初始化赋值 var per = new Person('kitty', '3'); //打印实例对象 console.

理解javascript 对象,原型对象、闭包

javascript作为一个面向对象的语言,理解 对象.原型.闭包.模块模式等技术点对于成为一名合格的javascript程序员相当重要,多年没写过blog,今天就先拋个玉,在下基本也不做前端,但颇感兴趣,愿意和大家一起学习.此篇只是对自己认为的比较重要的知识点进行了说明,连贯性不是特别好,大家共同进步. 注意:文中中文并非英文翻译,只是个人理解. 理解面向对象 对象(object) An object is a collection of properties and has a single

js中原型和原型链理解

js中属性的继承以及查找都会用到原型链的知识,对于深入学习js的人来说是一个难点也是一个重点,下面梳理下对于原型以及原型链的理解. 首先,我们要知道什么是原型以及原型链?他们有什么样的作用? 可以理解为JS对象在创建时都会与之关联另一个对象,这就是我们所说的原型,每一个对象都会从原型"继承"属性.下图表示了构造函数与实例原型的关系,其中Object.prototype表示实例原型. 那么实例与实例原型又是怎么联系的呢?接下来又要说到另一个属性__proto__,每一个JS对象都有一个属