《JS权威指南学习总结--9.5 类和类型》

内容要点:

    介绍了三种用以检测任意对象的类的技术,instanceof运算符、constructor属性,以及构造函数的名字。

    但每种技术都不甚完美,本节总结了鸭式辩型,这种编程哲学更加关注对象可以完成什么工作(它包含什么方法)而不是对象属于哪个类

 一.instanceof运算符

     1.左操作数是带检测其类的对象,右操作数是定义类的构造函数。如果o继承自c.prototype,则表达式 o instanceof c值为true.这里的继承可以不是直接继承,如果o所继承的对象继承自另一个对象,后一个对象继承自c.prototype,这个表达式的运算结果也是true,

     2.构造函数是类的公共标识,但原型是唯一的标识。尽管Instanceof运算符的右操作数是构造函数,但计算过程实际上是检测了对象的继承关系,而不是检测创建对象的构造函数。

     3.isPrototypeOf()方法:不使用构造函数作为中介,来检查对象的原型链上是否存在某个特定的原型对象。

        range.methods.isPrototypeOf(r); //range.method 是原型对象

     4.instancof运算符和isProtootypeOf()方法的缺点是:

         我们无法通过对象来获得类名,只能检测对象是否属于指定的类名。

         在客户端JS中还有一个比较严重的不足,就是在多窗口和多框架子页面的Web应用中兼容性不佳。每个窗口和框架子页面都具有单独的执行上下文,每个上下文都包含独有的全局变量和一组构造函数。在两个不同框架页面中创建的两个数组继承自两个相同但相互独立的原型对象,其中一个框架页面中的数组不是另一个框架页面的Array()构造函数的实例,instanceof运算结果是false。

二.constructor属性

     1.另一种识别对象是否属于某个类的方法是使用constructor属性,因为构造函数是类的公共标识,所以最直接的方法就是使用constructor属性,比如:

         function typeAndValue(x){

            if(x == null ) return ""; //Null和undefined没有构造函数

            switch(x.constructor){

              case Number : return "Number" + x; //处理原始类型

              case String : return "String: ' " + x + " ' ";

              case Date : return "Date" + x; //处理内置类型

              case RegExp : return "RegExp:" + x;

              case Complex : return "Complex:" + x; //处理自定义类型

                }

           }

     需要注意的是,在代码中关键字case后的表达式都是函数,如果改用typeof运算符或获取到对象的class属性的话,它们应当改为字符串。

     2.使用constructor属性检测对象属于某个类的技术的不足之处和instanceof一样。在多个执行上下文的场景中它是无法正常工作的(比如在浏览器窗口的多个框架子页面中)。在这种情况下,每个框架页面各自拥有独立的构造函数集合,一个框架页面中的Array构造函数和另一个框架页面的Array构造函数不是同一个构造函数。

        同样,在javascript中也并非所有的对象都包含constructor属性。在每个新创建的函数原型上默认会有constructor属性,但我们常常会忽觉原型上constructor属性。比如例9-1和例9-2它们的实例都没有constructor属性。

三.构造函数的名称

    1.使用instanceof运算符和constructor属性来检测对象所属的类有一个主要的问题,在多个执行上下文中存在构造函数的多个副本的时候,这两种方法的检测结果会出错。多个执行上下文中的函数看起来是一模一样,但它们是相互独立的对象,因此彼此也不相等。

    2.一种可能的解决方案是使用构造函数的名字而不是使用构造函数本身作为类标识符。

       一个窗口里的Array构造函数和另一个窗口的Array构造函数是不相等的,但是它们的名字是一样的。

       在一些js的实现中为函数对象提供了一个非标准的属性name,用来表示函数的名称。

       对于那些没有name属性的javascript实现来说,可以将函数转换为字符串,然后从中提取出函数名。 

    3.例9-4:可以判断值的类型的typeof()函数 

       /*以字符串形式返回o的类型:如果o是null,返回"null";如果o是NaN,返回"nan"。。。如果typeof所返回的值不是"object",则返回这个值。。如果o的类不是"object",则返回这个值,,如果o包含构造函数并且这个构造函数具有名称,则返回这个名称,,,否则,一律返回"object"。*/

        function type (o){

           var t,c,n;  //type,class,name

           //处理null值的特殊情况

           if(o===null)return "null";

           //另外一种特殊情况:NaN和它自身不相等

          if(o!==o) return "nan";

           //如果typeof的值不是"object",则使用这个值,这可以识别出原始值得类型和函数

           if((t == typeof o)!=="object") return t;

          //返回对象的类名,除非值为"object",这种方式可以识别出大多数的内置对象。

          if((c == classof(o))!=="Object") return c;

         //如果对象构造函数的名字存在的话,则返回它

          if(o.constructor && typeof o.constructor === "function" && (n = o.constructor.getName())) return n;

          //其他的类型都无法判别,一律返回"Object"

          return "Object";

         }

        //返回对象的类

        function classof(o){

          return Object.prototype.toString.call(o).slice(8,-1);

         };

        //返回函数的名字(可能是空字符串),不是函数的话返回null

         Function.prototype.getName = function(){

            if("name" in this) return this.name;

            return this.name = this.toString().match(/function\s*([^(]*)\(/)[1])

          };

         var a = new Date();//Date
         var b = [1,2,3]; //Array
         var c = {}; //Object
         var d = true; //boolean
         var e = "1"; //string
         var f = 1;//number
         var g = function(){};//function
         var h = new Function(); //function

         console.log(type(g));

         这种使用构造函数名字来识别对象的类的做法和使用constructor属性一样有一个问题:并不是所有的对象都具有constructor属性。此外,并不是所有的函数都有名字。如果使用不带名字的函数定义表达式定义一个构造函数,getName()方法则会返回空字符串:

         //这个构造函数没有名字

         var Complex = function(x,y){ this.r = x;this.i=y; }

         //这个构造函数有名字

         var Range = function Range(f,t){ this.from = f;this.to = t; }

转载于:https://www.cnblogs.com/hanxuming/p/5849476.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/430154.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

js密码强度正则表达式_知道这20个前端正则表达式,能让你做项目时少写1000行甚至一万行

正则表达式,一个十分古老而又强大的文本处理工具,仅仅用一段非常简短的表达式语句,便能够快速实现一个非常复杂的业务逻辑。熟练地掌握正则表达式的话,能够使你的开发效率得到极大的提升。正则表达式经常被用于字段或任意字符串的…

MongoDB数据库设计备忘

1、sex存为01还是男女? 存为01主要是为了国际化和节省存储空间。存为01很容易转换成不同语言表示的男女。 2、文件存储方案 MongoDB有GirdFS用来将文件直接保存到数据库,如果使用nginx,可以直接使用http读取GridFS里面的文件。 所以&…

react js 按条数 展开/折叠

//2条const MAX_SHOW_NUM 2;class HotDiscuss extends Component { static propTypes { //验证 repliedCommentList: PropTypes.array, }; constructor(props) { super(props); this.state { //子评论折叠 isCl…

python怎么获取时间_Python:如何从datetime.timedelta对象中获取时间?

在我看来,MySQL中的TIME类型旨在表示时间间隔,就像Python中的datetime.timedelta那样。从您引用的文档中:TIME values may range from -838:59:59 to 838:59:59. The hours part may be so large because the TIME type can be used not only…

腾讯视频客户端导出MP4格式

腾讯视频下载下来之后是.qlv格式,这种格式只能使用客户端播放。感觉挺蛋疼的,Mp4好不容易让各种设备都可以统一播放视频了,这样一搞感觉又倒退了几十年,关键的是,有些资源是腾讯独家的,不装客户端就看不了&…

Java上传文件到MongoDB GirdFS

上传有两种方式,一种是使用UploadFromStream,另外一种是OpenUploadStream方式,这里使用的是第二种方式: public ObjectId save(){GridFSBucket gfsbk GridFSBuckets.create(db, "user_photo");byte[] data "Data…

js后退页面不重新加载_快应用:支持加载单独JS文件的规范思考

当前快应用的项目中,支持加载其它JS文件(通过:require(./foo.js)),然后通过webpack工具处理依赖,最终完成页面JS的构建,其中页面JS包含了引入的所有JS内容;本文讨论的主要是&#xf…

Linux Linux程序练习七

题目&#xff1a;实现两个程序mysignal、mycontrl&#xff0c;mycontrl给mysignal发送SIGINT信号&#xff0c;控制mysignal是否在屏幕打印“hello”字符串。 //捕捉信号#include <stdio.h> #include <stdlib.h> #include <string.h> #include <errno.h>…

python读取每一行文字二十四_python接口自动化(二十四)--unittest断言——中(详解)...

简介上一篇通过简单的案例给小伙伴们介绍了一下unittest断言&#xff0c;这篇我们将通过结合和围绕实际的工作来进行unittest的断言。这里以获取城市天气预报的接口为例&#xff0c;设计了 2 个用例&#xff0c;一个是查询北京的天气&#xff0c;一个是查询南京为例&#xff0c…

spring MVC配置form支持PUT和DELETE方法

REST的关键原则之一就是“使用标准接口”&#xff08;the use of the Uniform Interface&#xff09;&#xff0c;也就是提倡根据不同的语义使用GET, PUT, POST和DELETE方法&#xff0c;而html的form标签只支持两种提交方法&#xff1a;POST和GET&#xff0c;所以&#xff0c;为…

如何学习编译原理?

编译原理很难学&#xff0c;但如果自己动手编&#xff0c;会简单一点&#xff0c;而且不要想一口吃成胖子&#xff0c;从词法分析开始写&#xff0c;一步步来&#xff0c;下个龙书电子版看看。慢慢来&#xff0c;一点一点地去消化它&#xff0c;让它成为你的知识。 转载于:http…

Spring MVC访问不到静态资源

运行Spring MVC项目&#xff0c;发现.css&#xff0c;js等文件加载不了&#xff0c;一般是spring MVC的拦截匹配导致的。 例如我在web.xml里这样配置&#xff1a; <servlet><servlet-name>spring</servlet-name><servlet-class>org.springframework.w…

206. Reverse Linked List

Reverse a singly linked list. Solution 1: 思路&#xff1a;null的使用。用一个null node来承接&#xff0c;一个一个接上去即可。一刷的时候还觉得这node转化好麻烦好神奇&#xff0c;熟悉之后其实做起来很快。 /*** Definition for singly-linked list.* public class List…

labview项目实例_labview操作者框架

0.引言操作者框架适合于多并行任务的项目。在这样的项目中&#xff0c;多个并行任务之间往往需要相互通信&#xff0c;传统的解决办法是&#xff0c;每个任务一个队列&#xff0c;一个while循环&#xff0c;多任务项目需要在一个程序框图使用多个while&#xff0c;不好看。NI说…

eclipse发布web不带项目名的url

默认发布后访问地址是&#xff1a; http://localhost:8080/huanle/ 要达到的效果是&#xff1a; http://localhost:8080/ 不带项目名的url的好处是&#xff0c;不用再在每个地址前加<% path%>了&#xff1a; &#xff08;很烦有木有&#xff09; 操作方法&#x…

php 随机在文章中添加锚文本_页面SEO优化的锚文本优化概念

SEO优化分为结构优化和页面优化&#xff0c;页面的SEO优化中其中一个重点是锚文本的建设。锚文本的概念就是网站的内部链接&#xff0c;较为常见的就是将文章中的关键词作为锚文本。但在具体建设当中&#xff0c;很多网站对锚文本的处理出现了很多错误。这是因为对锚文本的优化…

求一个整数数组的最大元素,递归方法实现

Java版本&#xff1a; public class Main {public static void main(String[] args) {int[] array {1, 3, 5, 6, 3, 5, 3, 8};System.out.println(findMaxValue(array));}private static int findMaxValue(int[] array) {if(array.length < 0 || array null) {return -1;}…

eclipse发布web显示异常,清除缓存也无效?

发布的项目突然之间显示就不正常了&#xff0c;清除了n遍缓存&#xff0c;tomcat目录&#xff0c;一点效果都没有&#xff0c;这时候&#xff0c;应该用Dreamweaver检查下页面代码&#xff0c;很可能是你不小心删了点什么。 下面是一个血的教训&#xff0c;浪费了一上午时间&a…

python画图模块_学习python画图模块plotnine:第一步安装

官网链接https://plotnine.readthedocs.io/en/stable/index.html知乎介绍的文章https://zhuanlan.zhihu.com/p/47814353简单介绍语法类似于R语言的ggplot2包的python画图模块安装按照官网教程直接使用pip安装pip install plotnine遇到报错ERROR: Cannot uninstall certifi. It …

解决Oracle 11gR2 空闲连接过多,导致连接数满的问题

今天又遇到了11gR2连接数满的问题&#xff0c;以前也遇到过&#xff0c;因为应用那边没有深入检查&#xff0c;没有找到具体原因&#xff0c;暂且认为是这个版本Oracle的BUG吧。 上次的处理办法是用Shell脚本定时在系统中kill v$session.statusINACTIVE的连接&#xff0c;但是…