JavaScript面向对象及相关知识

Posted 2020-07-03

最近在学习javascript面向对象,写下自己的理解及相关资料,以备查阅。

一.面向对象中涉及的相关几个概念 

1.作用域

   所谓作用域,就是说属性和函数的可访问范围。在JavaScript中,作用域分为两种。全局作用域和局部作用域。

所有没有var 声明 或 定义于最外层函数和最外层函数外面即为全局作用域。也就是定义可以随意调用。

自定义函数内部用var声明的为局部作用域。

    var num = 1;                        //全局作用域
    window.onload = function() {        //最外层为全局作用域
        var   age = 18;
        function turn() {               //局部作用域,内部用var声明的只能被turn读取
                 sex = "男";            //未用var声明,为全局变量(可能只想用作局部,这样会出现bug,不推荐)
            var name = "刘某";          //局部变量
            function test() {
                var data = "好";
                var name = "王某";
                console.log(name)       //王某
            };
            console.log(name)           //刘某
        }
    }

需注意的是 读取属性(变量)时是先在最近的作用域中查找,没有就往上查找。最后查找全局,未定义则报错 undefined。

2.闭包

在JavaScript中,一个函数自带有作用域。一函数嵌套在另一函数内,内部函数可以访问到外部函数的属性,但外部函数和其他函数访问不到内部函数,为了解决这问题。闭包应运而生。

闭包的定义就是函数内部与其他函数连接的桥梁(常用return指向)。

    function test(){
        var n = 2;              //定义为局部变量 外部函数不能访问            
        function f2(){
            console.log(n);
        }
        return f2;             //用return 返回  
    }
    var result=test();  
        result();              // 2 外部可以得到值

3. this指向

    var name = "二货";                    //全局 指向window

    function fooCoder(x) {
        this.x = x;
    }
    fooCoder(2);                         //函数调用,this指向window

    var person = {
        name : "foocoder",
        hello : function(sth){
            console.log(this.name + " says " + sth);
        }
    };
    person.hello("hello world");          //对象调用时,this指向对象本身(Person)

    function Foo(name,color) {
        this.name=name;
        this.color=color;
    }
    var cc=new Foo("liuxing","yellow");  //调用构造函数时,this指向生成的实例(cc)

    var persone = {
        name : "foocoder",
        hello : function(sth){
            var that = this;
            var sayhello = function(sth) {
                console.log(that.name + " says " + sth); //函数内部this指向window(一说为JavaScript设计有误)
            };
            sayhello(sth);
        }
    }
    person.hello("hello world");       //foocoder says hello world

View Code