张春 发表于 2022-6-24 22:05:40

重温JS——对象、函数、变量的作用域、this关键字、构造函数

目录
一、对象
二、函数
三、变量的作用域
四、this关键字
五、构造函数  

一、对象

   JS中只有两种数据类型: 基本数据、引用数据(object、function)
      var obj = {
            name:"karen",//对象内的属性
            //对象的方法:这个函数的大括号中的代码不会运行,只有调用了才会运行
            sayName:function () {
                console.log(1)
            }
      }

二、函数

函数的三种写法
      //定义一个函数:直接创建一个函数,把它当作数据一样,不会提升
      var obj= {
            say:function () {}
      }
      var a=function () {}
      var arr=
      (function(){})

      //声明函数:直接在作用域写一个函数,会提升
      function fn () {}

      //标准的创建一个函数都西昂
      var f1=new Function("console.log(1)")
      f1()   函数被调用一次,就会执行一次函数体中的所有代码
函数一定会有返回值,没有写return的就返回undefined。写了返回值,就是返回值。
    注意:
声明一个函数:var fn = function () { }
在控制台写fn() 回车后是undefined。
如果在控制台写console.log (123),回车后会显示123  和undefined
    return 后面紧跟表达式。如果紧跟后面没有写代码的话,就是一个空表达式,就生成undefined。
return一旦运行了,函数体后面的代码都不会执行了
     函数的嵌套
      function fn () {
            var a=20
            function fm(){}
            var obj={say:function(){
                console.log(obj)//能访问到上一排的obj。但是访问不到say属性
            }}
      }    能够修饰标识符的只有两个:  var   function
    实际传入函数的参数(实参)的格式可以比形参的个数多,按照顺序赋值,不会影响程序的执行逻辑,但是会影响性能。
也可以比形参的个数少,也是按顺序赋值。可能会影响程序的执行逻辑==>可以解决:就是设计函数时,提前预设
      function fn (a,b) {
            if(a==undefined){a=0}
            if(b==undefined){b={}}
      }
      fn(10,{name:"karen"})
      fn(1)    函数内部有一个关键字 arguments,代表实际传入函数的参数列表(类数组)。
函数的length属性代表的是形参的个数
    函数有name属性,就是自己函数的名字
如果函数有自己的名字,那就是自己的名字(就算有变量赋值给它也是自己的名字),但如果没有自己的名字,但是有变量赋值此函数,那函数的name属性值就是变量名
       function fn() {}
      console.log(fn.name)//fn
      var a=fn
      console.log(a.name)//fn

      var a=function() {}
      console.log(a.name)   //a


      var a=function fn() {}
      console.log(a.name) //fn



三、变量的作用域

作用域一般是对函数来说
在ES5中,函数的代码块内部的代码,可以访问形参变量,也可以访问外部的变量(全局),就近优先。
函数外面的代码不能直接访问函数内部的变量
作用域:指一个变量它在哪些代码范围能够被使用,这些地方就是变量的作用域
局部变量就是函数内部能使用,外部不能使用的变量
      var obj = {
            name:"karen"
      }
      function fn(n) {
            n.name="jack"   //打印jack
            // n={name:"jack"}//打印karen
      }
      fn(obj)
      console.log(obj.name)    name先在自己的fm函数中找,如果没有,就去外面的作用域找,外面的作用域是fn和fm之间,而这之间只有一个obj,没有name,所以最后结果为没有定义报错
      function fn () {
            var obj={
                name:"karen",
                fm:function() {
                  console.log(name)   
                }
            }
      }


四、this关键字

   this关键字代表了函数调用时的调用者。只需要看离他最近(嵌套)的函数的调用者
      fn()//window
      obj.fn()   //obj
      obj.x1.x2()//obj.x1
      (function(){})()   //window
      fn()()//window
      fn()()   //fn()返回的数组
      var f1=new fn()   //创建的新对象(可能是f1)
在脚本中代表的是window全局对象
console.log(this)

var a=20   //全局变量会在脚本执行时,把变量名设置为全局对象window的属性

function fn () {console.log(this)}   //全局函数会在脚本执 行时,把函数设置为全局对象window方法

fn()   ==>   window.fn()
      var obj={fn:function(){console.log(this)}}
      var arr=[]
      arr=1
      arr=obj.fn
      arr()   //       //匿名函数
      (function(){
            console.log(this)   //window
      })();

      function fn() {
            return function fm () {
                console.log(this)//window
            }
      }
      fn()()   //调用者是window   打印this 的愿意:ths代表了一个对象,常常在项目中需要给一个对象操作成员
winodw有一个属性: name,它的值是 空字符串 " "   ==>    name : " "
    基本数据取一个成员是可以的,但是是undefined
      function a(xx) {
            this.x=xx
            return this
      }
      var x=a(5)   //a=6
      var y=a(6)   //y=window
      console.log(x.x)   //undefined      6.x==>基本数据取一个成员是可以的,但是是undefined
      console.log(y.x)   //6                window.x=6    var a=b=c   的解释:
从右边开始,b=c;如果c是基本数据,就将其赋值给b;如果c是引用数据,就是b和c都指向/引用同一个空间。
a=b也是一样。虽然a是最后赋值(引用)的,但是a的引用声明是一开始就有了。
    this 基本上就代表的是对象,在极其少的时候,this不是对象==>call、apply、bind


五、构造函数  

JS是一个基于面向对象的单线程的脚本语言
   new fn()   解释:
new关键字后面跟函数,是一个表达式(运算符),创建对象的运算,整个表达式一定会得到一个对象
1、创建一个空对象  {}
2、运行构造函数,让内部的this指向创建的对象(用创建的空对象去调用构造函数) {}.fn()
3、整个表达式的结果,看函数的返回值:(可能是数组、函数.....)
      返回值是引用数据,就是返回值
      返回值不是引用数据,那么就是这个运行完毕之后的创建的那个对象
    任何对象都有构造函数,任何对象都是函数创建出来的(null除外)
    new  ==>后面一般跟一个函数,new会创建对象,而且会去调用这个函数
new fn==> 创建对象,然后调用函数,不传参   ==>new无参
new fn()==> 创建对象,然后调用函数,并传参   ==>new带参
      function fn() {
            this.name="karen"
            return function fm () {
                console.log("1")
                this.name="jack"
            }
      }
      var f1=new fn()
      console.log(f1.name)   //fm       console.log(x)//报错
      console.log(window.x)//undefined   (原型链的知识)

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: 重温JS——对象、函数、变量的作用域、this关键字、构造函数