js函数调用-js网页特效代码_进源教程网

js的原型,javascript关于原型继承的一些问题

摘要: 为String类型增加原型方法css2JS,返回CSS样式名称的JS格式,改掉这三个A如何用原型链写一个泛型集合原型链一直是个很抽象的e799bee5baa6e997aee7ad9431333363373835概念,看不到,摸不着.随着最近对JavaScript进一步的学习,我对原型链有了一点理解,下面讲出来.基 ...

为String类型增加原型方法css2JS,返回CSS样式名称的JS格式,

改掉这三个A

如何用原型链写一个泛型集合

原型链一直是个很抽象的e799bee5baa6e997aee7ad9431333363373835概念,看不到,摸不着.随着最近对JavaScript进一步的学习,我对原型链有了一点理解,下面讲出来.基础知识在JavaScript中,一共有两种类型的值,原始值和对象值.每个对象都有一个内部属性[[prototype]],我们通常称之为原型.原型的值可以是一个对象,也可以是null.如果它的值是一个对象,则这个对象也一定有自己的原型.这样就形成了一条线性的链,我们称之为原型链.访问一个对象的原型可以使用ES5中的Object.getPrototypeOf方法,或者ES6中的__proto__属性.原型链的作用是用来实现继承,比如我们新建一个数组,数组的方法就是从数组的原型上继承而来的.vararr=[];arr.map===Array.prototype.map//arr.map是从arr.__proto__上继承下来的,arr.__proto__也就是Array.prototype图形化原型链虽然我们都说原型链,但实际上,在不考虑网页中frame的情况,js引擎在执行期间的某一时刻,所有存在的对象组成的是一棵原型树.默认情况下,只有一棵树.根节点可以说是Object.prototype,也可以说是null.但我们可以再建立一棵原型树,通过使用Object.create方法varfoo=Object.create(null);//foo是一个对象,但它是游离的,不属于已有的那棵原型树varbar=Object.create(foo);//bar的原型是foovarbaz=Object.create(foo);//baz的原型是foo这样我们有了第二棵原型树遍历原型链我们没有法遍历到所有以某个对象为原型的对象,但我们可以向上遍历,获取到一个对象所有的上层原型,这个原型链必定是线性的,尽头是null.functiongetPrototypeChain(object){varprotoChain=[];while(object=object.__proto__){protoChain.push(object);}protoChain.push(null);returnprotoChain;}试验一下,不同的环境实现不同,显示形式也不同.下面是在chrome控制台中的显示.>getPrototypeChain(newString(""))[String,Object,null]//依次是String.prototype,Object.prototype,null>getPrototypeChain(function(){})[functionEmpty(){},Object,null]//依次是Function.prototype,Object.prototype,null内置类型的对象的原型链并不长,下面试试宿主对象.>getPrototypeChain(document.createElement("div"))[HTMLDivElement,HTMLElement,Element,Node,Object,null]这个就长多了.超长原型链可以看出来,我们平时使用的对象并没有很长的原型链.但可以自己构造一个.functionFoo(){}for(vari=0;i<100;i++){Foo.prototype["foo"+i]=i;Foo.prototype=newFoo;}console.dir(getPrototypeChain(newFoo));最后的这个newFoo有多少个上层原型呢?

如何通俗解释 JavaScript 中的原型概念

简单来讲:构造函数是制作蛋糕的机器, 那么原型就是蛋糕的模子, 生成出来对象自然就是蛋糕啦用代码实现:// 这个函数是制作蛋糕的机器functionMakeCake(buyer){this.buyer=buyer;}// 我们选择一个9寸圆形的草莓蛋糕MakeCake.prototype={size:"9寸",shape:"圆形",taste:"草莓味 "}varstrawberryCake=newMakeCake("Jimmy");// 给jimmy做的草莓蛋糕出炉啦varstrawberryCake2=newMakeCake("Bob");// 再给Bob做一个// 我们选择一个12寸方形巧克力双层蛋糕模型MakeCake.prototype={size:"12寸",shape:"方形",taste:"巧克力",type:"双层的"}varchocolateCake=newMakeCake("Jimmy");// 给Jimmy做一个巧克力蛋糕 :)那这个蛋糕制造机是怎么被生产出来的呢?制蛋糕的机器也是仿照一个模子通过一台机器制造机做出来的javascript内部有一个机器制造器叫做Function函数。而你可以把function CustomFunction(){...} 视为new Function(args, functionBody) 的语法糖。当你需要一台机器,你就可以使用new Function({...}),这个机器制造器Function就会按照一个默认的模子生产出一台机器。要说明的是, 语法糖的说法并不是完全准确的,函数声明形式和new Function()不等价,new Function() 效率会e68a84e8a2ade799bee5baa6e79fa5e9819331333363396335低一些。附一张原型链的图: 对象的__proto__属性指向它的原型functionCat(name){this.name=name}varjetty=newCat()

面试问js原型怎么理解

一、基于原型链的继承1.继承属性JavaScript 对象是动态的属性“包”(指其自己的属性)。JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依此层层向上搜索,直到找到一个名字匹配的属性或到达原型链的末尾。下面的代码将演示,当访问一个对象的属性时会发生的行为:[javascript]view plaincopy//假定有一个对象o,其自身的属性(ownproperties)有a和b://{a:1,b:2}//o的原型o.[[Prototype]]有属性b和c://{b:3,c:4}//最后,o.[[Prototype]].[[Prototype]]是null.//这就是原型链的末尾,即null,//根据定义,null没有[[Prototype]].//综上,整个原型链如下://{a:1,b:2}--->{b:3,c:4}--->nullconsole.log(o.a);//1//a是o的自身属性吗?是的,该属性的值为1console.log(o.b);//2//b是o的自身属性吗?是的,该属性的值为2//o.[[Prototype]]上还有一个'b'属性,但是它不会被访问到.这种情况称为"属性遮蔽(propertyshadowing)".console.log(o.c);//4//c是o的自身属性吗?不是,那看看o.[[Prototype]]上有没有.//c是o.[[Prototype]]的自身属性吗?是的,该属性的值为4console.log(o.d);//undefined//d是o的自身属性吗?不是,那看看o.[[Prototype]]上有没有.//d是o.[[Prototype]]的自身属性吗?不是,那看看o.[[Prototype]].[[Prototype]]上有没有.//o.[[Prototype]].[[Prototype]]为null,停止搜索,//没有d属性,返回undefined创建一个对象它自己的属性的方法就是设置这个e69da5e887aa7a686964616f31333365633837对象的属性。唯一例外的获取和设置的行为规则就是当有一个getter或者一个setter被设置成继承的属性的时候。2.继承方法JavaScript 并没有其他基于类的语言所定义的“方法”。在 JavaScript 里,任何函数都可以添加到对象上作为对象的属性。函数的继承与其他的属性继承没有差别,包括上面的“属性遮蔽”(这种情况相当于其他语言的方法重写)。当继承的函数被调用时,this指向的是当前继承的对象,而不是继承的函数所在的原型对象。[javascript]view plaincopyvaro={a:2,m:function(){returnthis.a+1;}};console.log(o.m());//3//当调用o.m时,'this'指向了o.varp=Object.create(o);//p是一个对象,p.[[Prototype]]是o.p.a=12;//创建p的自身属性a.console.log(p.m());//13//调用p.m时,'this'指向p.//又因为p继承o的m函数//此时的'this.a'即p.a,即p的自身属性'a'二、使用不同的方法来创建对象和生成原型链EDIT1.使用普通语法创建对象[javascript]view plaincopyvaro={a:1};//o这个对象继承了Object.prototype上面的所有属性//所以可以这样使用o.hasOwnProperty('a').//hasOwnProperty是Object.prototype的自身属性。//Object.prototype的原型为null。//原型链如下://o--->Object.prototype--->nullvara=["yo","whadup","?"];//数组都继承于Array.prototype//(indexOf,forEach等方法都是从它继承而来).//原型链如下://a--->Array.prototype--->Object.prototype--->nullfunctionf(){return2;}//函数都继承于Function.prototype//(call,bind等方法都是从它继承而来)://f--->Function.prototype--->Object.prototype--->null2.使用构造器创建对象在 JavaScript 中,构造器其实就是一个普通的函数。当使用new 操作符来作用这个函数时,它就可以被称为构造方法(构造函数)。[javascript]view plaincopyfunctionGraph(){this.vertexes=[];this.edges=[];}Graph.prototype={addVertex:function(v){this.vertexes.push(v);}};varg=newGraph();//g是生成的对象,他的自身属性有'vertices'和'edges'.//在g被实例化时,g.[[Prototype]]指向了Graph.prototype.3.使用 Object.create 创建对象ECMAScript 5 中引入了一个新方法:Object.create()。可以调用这个方法来创建一个新对象。新对象的原型就是调用create方法时传入的第一个参数:[javascript]view plaincopyvara={a:1};//a--->Object.prototype--->nullvarb=Object.create(a);//b--->a--->Object.prototype--->nullconsole.log(b.a);//1(继承而来)varc=Object.create(b);//c--->b--->a--->Object.prototype--->nullvard=Object.create(null);//d--->nullconsole.log(d.hasOwnProperty);//undefined,因为d没有继承Object.prototype4.使用class关键字ECMAScript6 引入了一套新的关键字用来实现class。使用基于类语言的开发人员会对这些结构感到熟悉,但它们是不一样的。 JavaScript 仍然是基于原型的。这些新的关键字包括class,constructor,static,extends, 和super.[javascript]view plaincopy"usestrict";classPolygon{constructor(height,width){this.height=height;this.width=width;}}classSquareextendsPolygon{constructor(sideLength){super(sideLength,sideLength);}getarea(){returnthis.height*this.width;}setsideLength(newLength){this.height=newLength;this.width=newLength;}}varsquare=newSquare(2);5.性能在原型链上查找属性比较耗时,对性能有副作用,这在性能要求苛刻的情况下很重要。另外,试图访问不存在的属性时会遍历整个原型链。遍历对象的属性时,原型链上的每个可枚举属性都会被枚举出来。检测对象的属性是定义在自身上还是在原型链上,有必要使用hasOwnProperty方法,所有继承自Object.proptotype 的对象都包含这个方法。hasOwnProperty是 JavaScript 中唯一一个只涉及对象自身属性而不会遍历原型链的方法。注意:仅仅通过判断值是否为undefined还不足以检测一个属性是否存在,一个属性可能存在而其值恰好为undefined。6.不好的实践:扩展原生对象的原型一个经常被用到的错误实践是去扩展Object.prototype或者其他内置对象的原型。该技术被称为 monkey patching,它破坏了原型链的密封性。尽管,一些流行的框架(如 Prototype.js)在使用该技术,但是并没有足够好的理由要用其他非标准的方法将内置的类型系统搞乱。我们去扩展内置对象原型的唯一理由是引入新的 JavaScript 引擎的某些新特性,比如Array.forEach。

js中在dom原型链编写一个可以遍历节点树的方法怎么写呢?

DOM(即 Document Object Mode) 是 W3C(万维网联盟)的标准。DOM 定义了访问 HTML 和 XML 文档的标准:“W3C文档对象模型(DOM) 是中立于zhidao平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”W3C DOM 标准被分为 3 个不同的部分:核心 DOM - 针对任何结构化文档的标准模型XML DOM - 针对 XML 文档的标准模型HTML DOM - 针对 HTML 文档的标准模型

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表