我们本次的解释,主要通过下图
粗看该图,估计你不一定能看明白。不过接下来让我逐行向你解释。
- 最左侧:意思是,有两个对象f1和f2,他们是通过new Foo()出来的。
- 中间:Foo()就是最左侧用到的Foo()
- 最右侧:表示,函数Foo()的prototype属性!
1、__proto__的虚线:该条线表示通过f1.__proto__可以访问到Foo.prototype,其实两者是等价的。
2、constructor实现:表示通过Foo.prototype.constructor可以找到Foo
function Foo() {
}
var f1 = new Foo();
alert(f1.__proto__ == Foo.prototype);
function Object(){[native code]}//Javascript自带,不是自定义的,可以近似认为是基类
function Function(){[native code]}//Javascript自带,不是自定义的,可以近似认为是基类
这里的这两个function,分别走两个方向,
Object作为了众多object(实例,new出来的)的基类型
Function作为众多function(主要是那些function出来的,就是定义出来的函数)的基类型
在开始下面更细致的解释先,我们约定一些内容,Object代表这里所说的Object,object代表实例对象
,Function代表这里说的Function,function是关键字。对于Object与object的区别很好理解,一个是function,一个是new出来。
现在让我们思考两个问题:
第一个,当我们扩展Object原型时,new出来的Function,是否会被扩展?
第二个,当我们扩展Function原型时,由于Object也是个Function,那么其实例object是否会被扩展
先看第一个问题.eg.
Object.prototype.test4extend="123";//扩展Object的原型
document.write("Function:"+Function.test4extend);//在Function中出现了test4extend属性
document.write("<br>")
document.write("Object:"+Object.test4extend);//在Object中出现了test4extend属性,此时Object还是个Function
document.write("<br>")
var obj=new Object;
document.write("Object instance:"+obj.test4extend);//在obj中扩展了test4extend,此时的obj是object
document.write("<br>")
function Foo()
{
}
var foo = new Foo;
document.write("foo object:"+foo.test4extend);//foo对象上扩展上了test4extend属性
document.write("<br>")
document.write("Foo Function:"+Foo.test4extend);//函数上也扩展上了test4extend属性
document.write("<br>")
console.log("Object", Object);
console.log("Function", Function);
注释已经写得很清晰了,通过以上几点我们很容易发现以下几点:
1、Object扩展了所有的object(obj,foo),与object扩展自Object是相符的。在这里更加验证了。2、Object扩展了Function,这点说明Function扩展自Object,说明Object比Function更底层些。3、Object扩展了自身的属性,即Object.test4extend也是可以的。这点说明,Object扩展了Function,又因为Object本身又是通过function定义出来的,所以会受到Function影响,所以,反过来Function又扩展了Object。
接下来看看第二个问题
Function.prototype.test4extend="123";//扩展Function的原型
document.write("Function:"+Function.test4extend);//在Function中出现了test4extend属性
document.write("<br>")
document.write("Object:"+Object.test4extend);//在Object中出现了test4extend属性,注意此时Object是个Function
document.write("<br>") var obj=new Object; document.write("Object
instance:"+obj.test4extend);//在obj中没有扩展上test4extend,此时的obj是object
document.write("<br>") function Foo() { }
var foo = new Foo; document.write("foo
object:"+foo.test4extend);//foo对象上没有扩展上test4extend document.write("<br>")
document.write("Foo Function:"+Foo.test4extend);//Function扩展上了test4extend属性
document.write("<br>")
这说明Function只管没有被实例化得,被实例化的,他是没有办法管的。与Object不同,Object是无论是否实例化都管的。
接下来解释这个图:
先看最左侧的__proto__虚线,表示Foo.__proto__相当于Function.prototype,这里和Object情况差不多,只是属性一致而已,并不是指真正的那个Function
中间的下部的__proto__虚线,代表Function.__proto__等于Function.prototype,这里可是真的就是,和前面的相当于不同。
alert(Function.__proto__===Function.prototype);//true
右侧左上的__proto__虚线,代表Object.__proto__等于Function.prototype,这里可是真的就是,和前面的相当于不同。
alert(Object.__proto__===Function.prototype);//true
右侧右上的__proto__虚线,代表Function.prototype.__proto__相当于Object.prototype,只是属性一致而已,并不是真的。
先让我们总结下__proto__和prototype的区别和关系。
区别:从实际效果上来说,可以认为__proto__是用来扩展Function的,扩展出来的函数,可以直接调用,不需要new出对象才能用,同时对象是不会扩展通过__proto__扩展的方法或属性的
function Foo() {
}
Foo.__proto__.test = "__proto__ test property found";// 通过__proto__扩展
Foo.__proto__.addextend = function() {
document.write("Foo add extend by __proto__");
document.write("<br>");
}
Foo.addextend();// 可以执行
var foo = new Foo;
document.write("Foo:" + Foo.test);// 可以访问
document.write("<br>");
document.write(foo.addextend);// 未定义
document.write("<br>");
document.write("Foo instance:" + foo.test);// 未定义
document.write("<br>");
对于prototype来说,它是针对对象的,也就是Function是无法使用的,只有new出来的才能有效
function Foo()
{
}
Foo.prototype.test="prototype test property found";
Foo.prototype.addextend=function(){
document.write("Foo add extend by prototype");
document.write("<br>");}
document.write(Foo.addextend());//未定义
document.write("<br>")
var foo=new Foo;
document.write("Foo:"+Foo.test);//无法访问
document.write("<br>")
foo.addextend();//可以执行
document.write("foo instance:"+foo.test);//找到了
document.write("<br>"
-
在Object中__proto__是Function的prototype是Object。
- 在Function中__proto__是Function的prototype也是Object。
- 现在让我们再来结合第三行的图看一看。有如下关系。
Function.__proto__就是(===)Function.prototype
Object.__proto__就是(===)Function.prototype
- Function的__proto__和prototype就是一个,扩展任何一个都是相同的效果。Object的__proto__就是Function.prototype。当我们扩展Object.__proto__时,就相当于扩展了Function.prototype和__proto__,反之亦然。
Object.__proto__.test4extend="123";//扩展Object的原型
alert("Function:"+Function.test4extend);//在Function中出现了test4extend属性
alert("Object:"+Object.test4extend);//在Object中出现了test4extend属性,此时Object还是个Function
var obj=new Object;
alert("Object instance:"+obj.test4extend);//未定义
function Foo()
{
}
var foo = new Foo;
alert("foo object:"+foo.test4extend);//未定义
alert("Function:"+Foo.test4extend);//函数上也扩展上了test4extend属性
【总结】
Function扩展自Object,但是Function对Object又有影响,这是通过Object.__proto__就是(===)Function.prototype建立的联系。记住这个联系后,我们还要记住__proto__和prototype的区别,前者扩展的只可以被Function直接调用,后者扩展的只可以通过其实例调用。另外,还要注意__proto__和prototype的链的概念,这是因为,他们可以互相关联,访问到Function或Ojbect的内容。
分享到:
相关推荐
在这篇文章中,我们将深入探讨Function和Object的关系,了解它们之间的联系和区别。 Function:函数对象 ---------------- 在JavaScript中,函数是一个对象,它代表了函数的概念。所有的函数对象都是由Function这...
总结来说,`object`和`Object`在JavaScript中的区别在于: 1. `object`是`typeof`操作符返回的一种字符串类型标识,表示非原始类型的变量。 2. `Object`是JavaScript的内置对象,所有其他对象的基类,包含操作对象的...
在JavaScript语言中,核心体系结构主要围绕两个构造函数——`Object`和`Function`构建。这两个构造函数不仅是所有其他对象的基础,也是理解JavaScript继承机制的关键。 #### 三、`instanceof`运算符详解 `...
JavaScript中的引用类型主要涉及到Object、Array、Date、RegExp和Function等类型。它们具有以下特点和知识点: 1. Object类型是JavaScript中最为基础和常用的引用类型。它可以用来模拟现实世界中的对象模型,存储...
js等比例缩放页面图片大小 // JavaScript Document function handle_img(tagimg_name,tagimg_width,tagimg_height){ var img_object=new Image(); var get_imgs=document.getElementsByName(tagimg_name); for...
Function instanceof Object 和 Object instanceof Function 都是 true 1。我们可以认为 Object 是一个特殊的“类”,而这里的“类”即:Function 于是便可以理解为: Object = Function () {} 或 Object = new ...
JavaScript是一种广泛应用于Web开发的脚本语言,尤其在前端领域占据着核心地位。它具有动态类型、基于原型的对象以及...这个"basic_js_object_inheritance"项目提供了一个很好的学习和实践JavaScript对象继承的起点。
打开控制台发现报错:object is not a function。 感觉很奇怪,这块的功能最新没动过怎么会突然出问题了呢?上线时主流浏览器都测试过了呀。 虽然奇怪,但是还的解决问题。看着代码发现一个radio对象的name属性和一...
`Function`、`Object`和它们之间的关系可以通过内存图来进一步理解。函数对象的构造过程与`Function`的构造过程类似,因为`Function`具有自举性。内存图中的高亮和分隔符号('|')是用来表示这一共同构造过程的。`...
例如,`duk_push_global_object()`用于获取或创建当前线程的全局对象,`duk_push_c_function()`用于将C函数注册为JavaScript函数,`duk_put_prop_string()`则用于将值设置到指定对象的指定键下。 2. **导出C函数**:...
本篇文章将详细探讨对象复制的原理、深拷贝与浅拷贝的区别,并通过实例解析如何在JavaScript中实现对象复制。 首先,我们要理解什么是对象复制。在JavaScript中,对象是引用类型,简单的赋值操作并不会创建新对象,...
这就是标题"function_as_object"所指的内容。现在我们深入探讨这一主题。 1. **函数对象**: 在JavaScript中,每个函数都是一个对象,这意味着它们都有属性和方法。例如,所有函数都拥有`toString()`方法,可以将...
总结来说,Qt_JS_Demo.zip包含了一个使用Qt的QWebEngineView组件和QWebChannel模块的示例,演示了如何在Qt应用中嵌入网页并实现Qt对象与JavaScript的双向通信。这个例子对于那些希望在Qt环境中集成网页功能或增强...
在JavaScript中,Object和Function对象是两种非常基础且重要的数据类型。它们构成了JavaScript语言的核心机制,涉及到了对象的创建、继承以及函数的处理等方面。本文将深入探讨这两个对象及其相关特性。 1. Object...
数据类型分为基本类型和引用类型,基本类型包括String、Number、Boolean、Null、Undefined,而引用类型主要是Object,其中Array、Function也是Object的子类型。 控制流是程序执行顺序的关键部分,if...else语句用于...
如下所示: 代码如下: var person = new Object(); person.name = “Nicholas”; person.age = “29” person.job = “Software Engineer”; person.sayName = function () { alert(this.name); }; person....
JavaScript对象是JavaScript编程语言的核心组成部分,它是一种基于键值对的数据结构,允许我们存储和操作数据。在JavaScript中,一切皆为对象,包括基本类型如字符串、数字和布尔值,它们都有各自的包装对象。理解...
Domtastic.js 是一个专为 JavaScript 开发者设计的轻量级DOM操作库,它提供了一系列高效、简洁的方法,使得在JavaScript中对DOM的操作变得更加简便和易用。 **1. 简介** Domtastic.js 针对原生JavaScript的DOM API...