zoukankan      html  css  js  c++  java
  • 06 js 作用域 对象

    # 1.作用域 #

    通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这 个名字的作用域。作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。

    js(es6前)中的作用域有两种:

    - 全局作用域

    - 局部作用域(函数作用域)

    ## 1.1 全局作用域 ##

    作用域整个代码执行的环境,或者一个独立的js文件

    在全局作用域下声明的变量叫做全局变量(在函数外部定义的变量)。

    全局变量在代码的任何位置都可以使用

    在全局作用域下 var 声明的变量是全局变量

    特殊情况下,在函数内不使用var 声明的变量也是全局变量(不建议使用)


    ## 1.2 局部作用域 ##

    作用于函数内的代码环境,就是局部作用域

    在局部作用域下声明的变量叫做局部变量(在函数内部定义的变量)
     局部变量只能在该函数内部使用
     在函数内部 var 声明的变量是局部变量
     函数的形参实际上就是局部变量

    # 2.预解析 #

    ## 2.1 机制 ##

    1 js引擎运行js 分两步  预解析跟代码执行

    (1)js引擎会把js里面所有的var 还有function  放在作用域的前面
    (2)代码执行,按照代码书写的顺序从上往下执行

    2 预解析分为 变量预解析(变量提升) 跟 函数预解析(函数提升)
    (1)变量提升就把所有变量提升到当前的作用域  不提升赋值操作
    (2)函数提升就把所有函数提升到当前的作用域 不调用函数

    # 2.对象 #


    在 JavaScript 中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、 函数等。

    对象是由属性和方法组成的。

    属性:事物的特征,在对象中用属性来表示(常用名词)

    方法:事物的行为,在对象中用方法来表示(常用动词)

    水井的名字、水井的身高 这些即是水井的属性

    水井在打电话,发短信 这些即是方法

    ## 2.1 创造对象 ##

    1、利用字面量创建对象

         

     <script>
            // 对象字面量:就是花括号{}里面包含了变大这个具体事物(对象)的属性和方法
            // 键 相当于属性名
            // 值 属性值
            var star = {
                    name: "水井",
                    age: 18,
                    sex: function() {
                        alert('')
                    }
                }
            // 对象里的函数称为方法,调用方法必须 对象.方法()
            star.sex()
            // 调用属性值 对象['属性'] 或 对象.属性
            console.log();
        </script>




    2、利用new Object创建

    Object() 第一个字母大写
    需要使用new关键字
    使用格式:对象.属性 = 值

          

    var shuijing = new Object();
        shuijing.name = "shuijing"
        shuijing.age = 18
        shuijing.sex = function (){
            alert('男')
        }



    3、利用构造函数创建对象

    构造函数 :是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与new 运算符一起 使用。我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。

    - 构造函数用于创建某一类对象,其首字母要大写

    - 构造函数要和new 一起使用才有意义

    构造函数约定首字母大写

    函数内的属性和方法前面需要添加this,表示当前的对象属性和方法

    不需要return返回结果

    必须用new 来调用构造函数

            

     function sj(name, age) {
                this.name = name
                this.age = age
                this.sayhi = function() {
                    alert('我的名字是:' + this.name)
                }
            }
            var shui = new sj('水井', 18)
            console.log(shui.name);
    
            shui.sayhi();



    ## 2.2 new关键字 ##

    new 在执行时会做四件事情:

    1. 在内存中创建一个新的空对象。

    2. 让 this 指向这个新的对象。

    3. 执行构造函数里面的代码,给这个新对象添加属性和方法。


    4. 返回这个新对象(所以构造函数里面不需要return)。

    # 3. 遍历对象属性 #
        
         

    <script>
            // for ... in 语句用于对数组或者对象的属性进行循环操作
            /*    for(变量 in 对象名字){
                   //执行代码
               } */
            var shuijing = new Object();
            shuijing.name = "shuijing"
            shuijing.age = 18
            shuijing.sex = function() {
                alert('')
            }
            for (var k in shuijing) {
                console.log(k) // k 是属性名
                console.log(shuijing[k]); //shuijing[k]这是属性值
    
            }
        </script>



    # 4. 内置对象 #

    js 中的对象分为3种 1、自定义对象 2、内置对象 3、浏览器对象

    前面两种对象是js基础内容,属于ECMAScript;第三个浏览器对象我们js独有的,我们js API讲解

    内置对象指js语言自带的一些对象,这些对象供开发者使用,并提供常有的基本的必要功能

    内置对象帮助我们快速开发 如Math、Date、
    Array、String

    ## 4.1 查文档 ##

    学习一个内置对象的使用,只要学会其常用成员的使用即可,我们可以通过查文档学习,可以通过MDN/W3C 来查询。 

    Mozilla 开发者网络(MDN)提供了有关开放网络技术(Open Web)的信息,包括 HTML、CSS 和万维网及 HTML5 应用的 API。 

    MDN:   https://developer.mozilla.org/zh-CN/ 

    ## 4.2 Math对象 ##

    Math对象不是构造函数,具有数学常数和函数的属性和方法。跟数学相关运算(绝对值、取整、最大值)

        Math.PI   // 圆周率 
        Math.floor()   // 向下取整 
        Math.ceil()            // 向上取整 
        Math.round()           // 四舍五入版 就近取整   注意 -3.5   结果是  -3  
        Math.abs()   // 绝对值 
        Math.max()/Math.min()  // 求最大和最小值
        Math.random() //随机
        

    // 1.Math.max()数组最大值
        
        var array1 = [1, 3, 2];
        console.log(Math.max(...array1));

     // 2.random() 返回一个随机的小数

        

     // 方法不跟参数
        console.log(Math.random());
        // 两数之间的随机整数 
        // Math.floor() === 向下取整,
        //Math.ceil() 函数返回大于或等于一个给定数字的最小整数。
        function getRandomInt(min, max) {
            min = Math.ceil(min)
            max = Math.ceil(max)
            return Math.floor(Math.random() * (max - min)) + min
        }
        console.log(getRandomInt(1, 3));
        var arr = [1, 2, 3, 4, 5, 6]
        console.log(arr[getRandomInt(0, arr.length - 1)]);


    ## 4.3 Date对象 ##

        Date 对象和 Math 对象不一样,他是一个构造函数,所以我们需要实例化后才能使用 
        Date 实例用来处理日期和时间
        
    日期格式化

        方法名            说明                        代码
        getFullYear()    获取当年                    dObj.getFullYear()
        getMonth()        获取当月(0-11)            d0bj.getMonth()
        getDate()        获取当天日期                d0bj.getDate()
        getDay()        获取星期几(周日0 到周六6)    d0bj.getDay()
        getHours()        获取当前小时                d0bj.getHours()
        getMinutes()    获取当前分钟                d0bj.getMinutes()
        getSeconds()    获取当前秒钟                d0bj.getSeconds()
            

    日期时间戳

        

     <script>
            // 获取Date 总的毫秒数距离1970年1月1日 过了多少毫秒数
            // 1.通过valueof()  gateTime()
            var date = new Date()
            console.log(date.valueOf());
            console.log(date.getTime());
            // 2.简单的写法(最常用的写法)
            var date1 = +new Date()
            console.log(date1);
            // 3.H5 新增的 获取总的毫秒数
            console.log(Date.now());
        </script>



    # 5.数组对象 #

    ## 5.1 检测是否为数组 ##

    instanceof 运算符,可以判断一个对象是否属于某种类型 

    Array.isArray()用于判断一个对象是否为数组,isArray() 是 HTML5 中提供的方法   

        

     <script>
            var arr = [1, 22]
            var obj = {};
            console.log(arr instanceof Array); // 是返回True
            console.log(obj instanceof Array); // 不是返回false
            console.log(Array.isArray(arr)); // true
            console.log(Array.isArray(obj)); // true
        </script>


    # 6. 字符串对象 #

    ## 6.1 基本包装类型 ##

    基本包装类型就是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法。 

        

     <script>
            var str = 'andy';
            console.log(str.length);
            // 基本包装类型就是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法。 
            // 1)把简单数据类型包装为复杂数据类型
            var temp = new String('andy')
            // 2)把临时变量的值 给 str
            str = temp 
            // 3)销毁这个临时变量
            temp = null
        </script>


    ## 6.2 根据字符串返回位置 ##

    字符串的所有方法都不修改本身,都是返回空值

        

     <script>
            // 字符串对象,根据字符返回位置
            // str.index('要查找的字符',起始的位置)
            var str = '改革春风吹满地'
            console.log(str.indexOf(''));
            console.log(str.indexOf('',3));  // 从索引号是 3的位置
            
        </script>



    ## 6.3 根据位置返回字符 ##

    charAt(index)  返回指定位置的字符(index 字符串的索引号)

    charCodeAt(index) 获取指定位置处字符的ASCII码

    str[index] 获取指定位置处字符     【HTMl5 IE8+支持】

    返回最多的字符

        

    <script>
            var str = 'abcoefoxyozzopp';
            var o = {}
            for (var i = 0; i < str.length; i++) {
                var chars = str.charAt(i)
                if (o[chars]) { // 是否存在这个属性值
                    o[chars]++
                } else {
                    o[chars] = 1
                }
            }
            var max = 0
            var ch = ''
            for (var k in o) {
                // k 得到是属性名
                o[k] > max ? (max = o[k]) && (ch = k) : ''
            }
            alert(ch)
        </script>



    ## 6.4 截取字符串 ##

    替换字符 replace('被替换的字符','替换的字符')

    字符转换 spilt('分隔符')
        
        

     <script>
            // 1. 替换字符 replace('被替换的字符','替换的字符')  只替换第一个字符
            var str = 'andy11111111111'
                //替换所有字符
            while (str.indexOf(1) !== -1) {
                str = str.replace(1, 2)
            }
            console.log(str);
    
            // 2. 字符转换 spilt('分隔符')
            var str2 = 'red,blue,yellow'
            console.log(str2.split(','));
        </script>
  • 相关阅读:
    【实验】利用系统自带脚本utlsampl.sql创建scott用户及样本数据
    有哪些优秀的沟通思路?
    srand()以及rand()函数用法
    微信公众号
    Sublime Text 3 全程详细图文原创教程(持续更新中。。。)
    Android应用的缓冲界面启动界面
    ListView技巧
    android线性布局参数
    CocoaPods的一波三则
    003.开发者账号异同
  • 原文地址:https://www.cnblogs.com/xujinglog/p/12893008.html
Copyright © 2011-2022 走看看