[笔记]Javascript中的11个难以理解的问题

2024-02-22 05:08

本文主要是介绍[笔记]Javascript中的11个难以理解的问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

看了这个人的javascript系列, 很受教育, 做了一些笔记.

http://www.cnblogs.com/fool/tag/%E7%90%86%E8%A7%A3Javascript/

  1. 原始值与引用值
    原始值存放在栈里, 引用值存放在堆里. 如程序:
    function Person(id,name,age){
    this.id = id;
    this.name = name;
    this.age = age;
    }
    var num = 10;
    var bol = true;
    var str = "abc";
    var obj = new Object();
    var arr = ['a','b','c'];
    var person = new Person(100,"笨蛋的座右铭",25);

  2. undefined和null
    undefined: 变量未定义; 是Undefined类型的专属值;
    null:引用未分配; 是Null类型的专属值.
    typeof(undefined) == undefined;
    typeof(null) == object;
    undefined==null;
    undefined!==null;
    null instanceof Object == false;
    undefined instanceof Object == false;
    虽然有Undefined和Null类型, 但是通过下面的例子说明这两个类型是不可见的, 也就是说我们只能使用他们的值:
    alert(undefined instanceof Undefined);
    alert(null instanceof Null);
  3. 伪数组
    特点: 1) 具有length属性; 2) 像数组一样按索引顺序存取数据; 3) 不具备数组特有的操作数据的方法如push, pop, slice...
    伪数组都可以通过Array.prototype.slice转换为真正的数组:
    var faceArray = {0: 'a', 1: 'b', length: 2}//标准的伪数组;
    var realArray = Array.prototype.slice.call(fakeArray);
    js中的伪数组:arguments, node.childNodes, document.getElementsByTagName()...
    IE中的问题 : IE中node.childNodes是不能用slice转化的.
    Jquery中的伪数组 : Jquery本身就是一个伪数组:
    alert($('.class1').length); alert($('.class1').[0].tagName);
  4. 关于简单类型的字面量
    var a = 1; b = true, c = "ccc";
    字面量看起来有类型
    alert(typeof a);//number
    alert(typeof b);//boolean
    alert(typeof c);//string
    但是通过instanceof却测不出来
    alert(a instanceof Number)//false
    alert(a instanceof Object)//false
    alert(b instanceof Boolean)//false
    alert(b instanceof Object)//false
    alert(c instanceof String)//false
    alert(c instanceof Object)//false
  5. 函数的prototype属性和对象实例的内部prototype属性
    每个function(构造函数)都有一个prototype属性, 每个对象实例都有一个不可见的(mozilla把它公开了, 可以通过__proto__来取得)内部的prototype属性, 它指向构造函数的prototype属性. prototype还可以有它自己的prototype属性, 这构成了prototype链,  Object是最顶的对象, 所以所有的prototype链最终会指向Object.prototype. 当访问对象实例的属性/方法的时候, 从对象实例自己开始搜索, 若果搜索不到, 沿着prototype链向上搜索, 直到Object.prototype.prototype == null 为止.
  6. 构造函数的一个小秘密
    var s = new function(){return "sss"};
    alert(s);//[object Object]
    s = new function(){return new String("sss")};
    alert(s);//sss
    关于这段代码的解释:
    只要 new 表达式之后的 constructor 返回(return)一个引用对象(数组,对象,函数等),都将覆盖new创建的匿名对象,如果返回(return)一个原始类型(无 return 时其实为 return 原始类型 undefined),那么就返回 new 创建的匿名对象.

  7. 对象的创建的过程
    function Person(name){
            this.name = name;   
    }
    Person.prototype = {
            getName: function(){return this.name}   
    };

    var p = new Person('zhangsan');
    解密p的创建过程:
    • 创建一个build-in object对象obj并初始化;
    • 将p的内部[[Prototype]]指向Person.prototype;
    • 将p作为this,使用arguments参数调用Person的内部[[Call]]方法, 即执行Person函数体, 并返回返回值, 如果没有return, 则返回undefined;
    • 如果前一步返回的是Object类型, 则返回这个值给p, 否则返回obj.
  8. 对象的自有属性和继承属性
    function Person(name){
            this.name = name;   
    }
    Person.prototype = {
            type: 'human',
            getName: function(){return this.name}   
    };
    var p = new Person('zhangsan');
    alert(p.hasOwnProperty('type'));//false
    p.type = 'ren';
    alert(p.hasOwnProperty('type'));//true
    运行结果很明确,对象的属性无法修改其原型中的同名属性,而只会自身创建一个同名属性并为其赋值。
  9. 函数对象的创建过程
    创建一个build-in object对象fn;
    将fn的内部[[Prototype]]设为Function.prototype;
    设置内部的[[Call]]属性,它是内部实现的一个方法,处理函数调用的逻辑。(简单的理解为指向函数体);
    设置fn.length为funArgs.length,如果函数没有参数,则将fn.length设置为0;
    fn.prototype的constructor指向fn自己;
    返回fn.
  10. instanceof的原理
    查看a是不是B的实例, 就是看B的prototype(构造函数的prototype属性)指向的对象在不在a的原形链上.
  11. 关于Function和Object的猜测
    alert(Function instanceof Function);//true
    alert(Function instanceof Object);//true  
    alert(Object instanceof Function);//true
    alert(Object instanceof Object);//true
    想了好久, 没有想透......

这篇关于[笔记]Javascript中的11个难以理解的问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/734209

相关文章

Java Stream流与使用操作指南

《JavaStream流与使用操作指南》Stream不是数据结构,而是一种高级的数据处理工具,允许你以声明式的方式处理数据集合,类似于SQL语句操作数据库,本文给大家介绍JavaStream流与使用... 目录一、什么是stream流二、创建stream流1.单列集合创建stream流2.双列集合创建str

springboot集成easypoi导出word换行处理过程

《springboot集成easypoi导出word换行处理过程》SpringBoot集成Easypoi导出Word时,换行符n失效显示为空格,解决方法包括生成段落或替换模板中n为回车,同时需确... 目录项目场景问题描述解决方案第一种:生成段落的方式第二种:替换模板的情况,换行符替换成回车总结项目场景s

SpringBoot集成redisson实现延时队列教程

《SpringBoot集成redisson实现延时队列教程》文章介绍了使用Redisson实现延迟队列的完整步骤,包括依赖导入、Redis配置、工具类封装、业务枚举定义、执行器实现、Bean创建、消费... 目录1、先给项目导入Redisson依赖2、配置redis3、创建 RedissonConfig 配

SpringBoot中@Value注入静态变量方式

《SpringBoot中@Value注入静态变量方式》SpringBoot中静态变量无法直接用@Value注入,需通过setter方法,@Value(${})从属性文件获取值,@Value(#{})用... 目录项目场景解决方案注解说明1、@Value("${}")使用示例2、@Value("#{}"php

SpringBoot分段处理List集合多线程批量插入数据方式

《SpringBoot分段处理List集合多线程批量插入数据方式》文章介绍如何处理大数据量List批量插入数据库的优化方案:通过拆分List并分配独立线程处理,结合Spring线程池与异步方法提升效率... 目录项目场景解决方案1.实体类2.Mapper3.spring容器注入线程池bejsan对象4.创建

线上Java OOM问题定位与解决方案超详细解析

《线上JavaOOM问题定位与解决方案超详细解析》OOM是JVM抛出的错误,表示内存分配失败,:本文主要介绍线上JavaOOM问题定位与解决方案的相关资料,文中通过代码介绍的非常详细,需要的朋... 目录一、OOM问题核心认知1.1 OOM定义与技术定位1.2 OOM常见类型及技术特征二、OOM问题定位工具

基于 Cursor 开发 Spring Boot 项目详细攻略

《基于Cursor开发SpringBoot项目详细攻略》Cursor是集成GPT4、Claude3.5等LLM的VSCode类AI编程工具,支持SpringBoot项目开发全流程,涵盖环境配... 目录cursor是什么?基于 Cursor 开发 Spring Boot 项目完整指南1. 环境准备2. 创建

Spring Security简介、使用与最佳实践

《SpringSecurity简介、使用与最佳实践》SpringSecurity是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架,本文给大家介绍SpringSec... 目录一、如何理解 Spring Security?—— 核心思想二、如何在 Java 项目中使用?——

SpringBoot+RustFS 实现文件切片极速上传的实例代码

《SpringBoot+RustFS实现文件切片极速上传的实例代码》本文介绍利用SpringBoot和RustFS构建高性能文件切片上传系统,实现大文件秒传、断点续传和分片上传等功能,具有一定的参考... 目录一、为什么选择 RustFS + SpringBoot?二、环境准备与部署2.1 安装 RustF

springboot中使用okhttp3的小结

《springboot中使用okhttp3的小结》OkHttp3是一个JavaHTTP客户端,可以处理各种请求类型,比如GET、POST、PUT等,并且支持高效的HTTP连接池、请求和响应缓存、以及异... 在 Spring Boot 项目中使用 OkHttp3 进行 HTTP 请求是一个高效且流行的方式。