JavaScript对象创建及继承原理实例解剖

对象创建
当一个函数对象被创建时候,Function构造器产生的函数对象会运行类似这样的代码:


代码如下:

this.prototype={constructor:this};

假设函数F
F用new方式构造对象时,对象的constructor被设置成这个F.prototype.constructor
如果函数在创建对象前修改了函数的prototype,会影响创建出来对象的construtor属性
如:


代码如下:

function F(){};
F.prototype={constructor:'1111'};
var o=new F();//o.constructor===‘1111' true

继承原理
JavaScript中的继承是使用原型链的机制,每个函数的实例都共享构造函数prototype属性中定义的数据,要使一个类继承另一个,需要把父函数实例赋值到子函数的prototype属性。并且在每次new实例对象时,对象的私有属性__proto__会被自动连接到构造函数的prototype。
instanceof就是查找实例对象的私有prototype属性链来确定是否是指定对象的实例
具体实例


代码如下:

//instanceof实现
function Myinstanceof(obj,type)
{
var proto=obj.__proto__;
while(proto)
{
if(proto ===type.prototype)break;
proto=proto.__proto__;
}
return proto!=null;
}
function View(){}
function TreeView(){}
TreeView.prototype=new View();//TreeView.prototype.__proto__=TreeView.prototype 自动完成
TreeView.prototype.constructor=TreeView;//修正constructor
var view=new TreeView();//view.__proto__=TreeView.prototype 自动完成
alert(view instanceof View); //true 查找到view.__proto__.__proto__时找到
alert(view instanceof TreeView); //true 查找到view.__proto__时找到
alert(Myinstanceof(view,View)); //true
alert(Myinstanceof(view,TreeView)); //true

上面自定义的Myinstanceof就是自己实现的一个instanceof功能的函数,由于IE内核实例存储prototype不是__proto__,所以Myinstanceof会无法通过,其他浏览器上应该都没有问题

(0)

相关推荐

  • javaScript对象和属性的创建方法

    复制代码 代码如下: 1.创建一个空对象:var o =new object(); 2.创建对象直接量:    var cricle={x:0,y:0,radius:2}    var homer={                         name:"Homer Simpson",                         age:34,                         married:true,                         emai

  • javascript 函数调用的对象和方法

    如果你真正理解Javascript函数是如何调用工作的,那么就可以避免一些bug的发生: 首先让我们创建一个简单的函数,这个函数将在下文中使用,这个函数仅仅返回当前的this的值和两个提供的参数. 复制代码 代码如下: function makeArray(arg1, arg2){ return [ this, arg1, arg2 ]; } 调用这个函数非常的简单,我们需要做的仅仅是: 复制代码 代码如下: makeArray('one', 'two'); 返回值:=> [ window, '

  • 创建、调用JavaScript对象的方法集锦

    今天在做项目时,遇到了需要创建JavaScript对象的情况.所以Bing了一篇老外写的关于3种创建JavaScript对象的文章,看后跟着打了一遍代码.感觉方法挺好的,在这里与大家分享一下.   一.利用函数创建对象: 复制代码 代码如下: //定义对象 function Animal(type) {     this.name="";     this.type=type;    this.introduction=function(){          return "

  • JavaScript 创建对象

    第一种:JSON方式/对象直接量 格式: var 对象名 = { 变量1: 变量1的值, 变量1: 变量1的值, --, 函数1: function() { 函数体 }, 函数2: function() { 函数体 }//Note:最后的逗号要去除为了和IE兼容. }; 说明: (1) 大括号内直接填写变量或者函数: (2) 对象的内容与值以冒号分隔,成对出现: (3) 包含的变量或者函数之间以逗号分隔: (4) 函数需要写在function(){}的大括号之内. 例子: var 对象名 = {

  • javascript转换字符串为dom对象(字符串动态创建dom)

    前言: 在javascript里面动态创建标准dom对象一般使用: var obj = document.createElement('div'); 然后再给obj设置一些属性. 但是,在实际使用过程中,有些人可能会想,要是能这样创建标准的dom对象就好了 伪代码:var obj=strToDom('<div id="div_1" class="div1">Hello World!</div>'); 那么今天的目的就是教大家怎么去实现一个这样

  • Javascript创建自定义对象 创建Object实例添加属性和方法

    如下所示: 复制代码 代码如下: var person = new Object(); person.name = "Nicholas"; person.age = "29" person.job = "Software Engineer"; person.sayName = function () { alert(this.name); }; person.sayName();上面的例子创建了一个名为person的对象,并为它添加了三个属性(n

  • JavaScript 三种创建对象的方法

    JavaScript中对象的创建有以下几种方式: (1)使用内置对象 (2)使用JSON符号 (3)自定义对象构造 一.使用内置对象 JavaScript可用的内置对象可分为两种: 1,JavaScript语言原生对象(语言级对象),如String.Object.Function等: 2,JavaScript运行期的宿主对象(环境宿主级对象),如window.document.body等. 我们所说的使用内置对象,是指通过JavaScript语言原生对象的构造方法,实例化出一个新的对象.如: 复

  • JavaScript 基于原型的对象(创建、调用)

    JavaScript中的对象有三种 1,内部对象 如Array,Boolean,Data,Math,Number,Object,RegExp,String对象等 这些对象系统给我们提供了各自的属性与方法供调用. 2,基于类的对象 用类的方式实现对象的引用,这些类需要我们自己定义 3,基于原型的对象 提供有关如何使用 JavaScript 基于原型的对象模型的指南,并且提供指向特定信息的链接,这些信息描述基于原型的对象的自定义构造函数和继承. 在我们写js代码的时候,内部对象是不可避免的要引用,但

  • javascript的函数、创建对象、封装、属性和方法、继承

    一,function 从一开始接触到js就感觉好灵活,每个人的写法都不一样,比如一个function就有N种写法 如:function showMsg(){},var showMsg=function(){},showMsg=function(){} 似乎没有什么区别,都是一样的嘛,真的是一样的吗,大家看看下面的例子 复制代码 代码如下: ///----------------------------------------------------------------------------

  • JavaScript对象创建及继承原理实例解剖

    对象创建: 当一个函数对象被创建时候,Function构造器产生的函数对象会运行类似这样的代码: 复制代码 代码如下: this.prototype={constructor:this}; 假设函数F F用new方式构造对象时,对象的constructor被设置成这个F.prototype.constructor 如果函数在创建对象前修改了函数的prototype,会影响创建出来对象的construtor属性 如: 复制代码 代码如下: function F(){}; F.prototype={

  • JavaScript对象创建模式实例汇总

    本文实例总结了JavaScript对象创建模式.分享给大家供大家参考,具体如下: 在JavaScript中创建对象是很容易的,可以使用对象字面量或者构造函数.常用的创建对象的模式有以下几种: 一. 工厂模式 工厂模式抽象了具体对象的过程,用函数来封装以特ing接口创建对象的细节. 如下: function createAnimal(name, age) { var o = new Object(); o.name = name; o.age = age; o.sayName = function

  • 详解 javascript对象创建模式

    创建模式 在javascript中,主要有以下几种创建模式: 工厂模式 构造函数模式 原型模式 组合模式 动态原型模式 寄生构造函数模式 稳妥构造模式 工厂模式 工厂模式是软件工程领域一种广为人知的设计模式.javascript实现方式: function createPerson(name, obj, job) { var o = new Object(); o.name = name; o.obj = obj; o.job = job; o.sayName = function() { al

  • JavaScript函数Call、Apply原理实例解析

    这篇文章主要介绍了JavaScript函数Call.Apply原理实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一.方法重用 使用 call() 方法,您可以编写能够在不同对象上使用的方法. 1.函数是对象方法 在 JavaScript 中,函数是对象的方法. 如果一个函数不是 JavaScript 对象的方法,那么它就是全局对象的函数(参见前一章). 下面的例子创建了带有三个属性的对象(firstName.lastName.full

  • JavaScript 对象创建的3种方法

    目录 1.对象字面量 2.new 关键字创建对象 3.使用 Object.create() 创建对象 4. 使用扩展操作符:... 5.使用Object.assign()方法 6.简写属性 7.简写方法 前言: 在 JavaScript中,对象是一组有属性名和属性值组成的无序集合,对象的创建可以通过对象字面量.new 关键字 和Object.create()函数来创建. 1.对象字面量 let obj = {} // 空对象 let obj2 = {a:1, b:2} let obj3 = {"

  • 如何判断Javascript对象是否存在的简单实例

    Javascript语言的设计不够严谨,很多地方一不小心就会出错. 举例来说,请考虑以下情况. 现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明.用自然语言描述的算法如下: if (myObj不存在){ 声明myObj; } 你可能会觉得,写出这段代码很容易.但是实际上,它涉及的语法问题,远比我们想象的复杂.Juriy Zaytsev指出,判断一个Javascript对象是否存在,有超过50种写法.只有对Javascript语言的实现细节非常清楚,才可能分得清它们的区别

  • Javascript对象及Proxy工作原理详解

    正文 这一章其实算是javascript的科普文章,其实这本书的读者一般都不会是入门者,因此按道理说应该不需要再科普才对.但是作者依旧安排了这一章,证明就是这一章内容与我们以为的对象不一样. Javascript中一切皆对象 这一句话大家应该耳熟能详,对于常规的字面量对象,和new出来的对象,大家应该都能分辨 const str = '' const str2 = new String() const obj = {} const obj2 = Object.create() 但是根据ECMA,

  • JavaScript解析机制与闭包原理实例详解

    本文实例讲述了JavaScript解析机制与闭包原理.分享给大家供大家参考,具体如下: js解析机制: js代码解析之前会创建一个如下的词法环境对象(仓库):LexicalEnvironment{ } 在扫描js代码时会把: 1.用声明的方式创建的函数的名字; 2.用var定义的变量的名字存到这个词法环境中; 3.同名的时候:函数声明会覆盖变量,下面的函数声明会覆盖上面的同名函数; 4.函数的值为:对函数的一个引用; 变量的值为undefined; 5.如果用函数表达式的方式创建一个函数: va

  • JavaScript原型链与继承操作实例总结

    本文实例讲述了JavaScript原型链与继承操作.分享给大家供大家参考,具体如下: 1. JavaScript继承 JavaScript继承可以说是发生在对象与对象之间,而原型链则是实现继承的主要方法: 1.1 原型链 利用原型让一引用类型继承另一个引用类型的属性和方法. 构造函数中有个prototype(每个函数中都有),指向他的原型对象,每个原型对象中也有一个constructor属性,指向原构造函数.通过构造函数创建的新对象中都有一个无法直接访问的[[proto]]属性,使得对象也指向构

  • javascript 对象 与 prototype 原型用法实例分析

    本文实例讲述了javascript 对象 与 prototype 原型用法.分享给大家供大家参考,具体如下: 我们做程序开发的,经常面对的就是一个一个对象.那么在javascript中我们怎么去创建一个类以及一个对象呢? <script type="text/javascript"> //创建一个Test对象 function Test(){ } var test = new Test(); //创建一个对象 var obj = new Object(); //json 对

随机推荐