前端---JavaScript基础1

我会带着你远行 2022-10-09 12:26 188阅读 0赞

### 文章目录 ###

*   *  前端---JavaScript基础1
     *   *  数据类型
         *  面向对象
         *  对象创建方式
         *  对象类型判断

## 前端—JavaScript基础1 ##

JS是 解释型语言：跨平台 慢 编译型语言：不能跨平台 快

### 数据类型 ###

### 面向对象 ###

### 对象创建方式 ###

### 对象类型判断 ###

//基本类型 boolean number string null undefined
    var str = "aaa";
    var num = 111;
    var bool = true;
    var und = undefined;
    var n = null;
    //复杂类型 array object function
    var arr = [1,2,3];
    var obj = { };
    var fun = function(){ }
    
    console.log(typeof str)  //所有引用的值都是对象
    
    //解释型语言 编译型语言
    //值传递、引用传递 栈、堆（内存）
    
    //创建数组的方式
    //第一种
    var arr = new Array();
    arr[0] = "a";
    arr[1] = "b";
    //第二种
    var arr2 = new Array("a","b");
    //第三种
    var arr3 = ["s","t"];
    
    
    //面向对象 面向过程
    //面向对象：对象（属性、行为）
    //面向过程：不具备复用性、没有对象思想
    //高级语言：抽象 继承 多态 封装
    //创建对象的方式 
    //第一种
    var person = new Object();
    person.name = "jack";
    person['age'] = 12;
    //第二种 字面量
    var = person2 = { };  //相当于创建一个空对象
    person2.name = "jack2";
    person2['age'] = 16;
    person2.action = function(){ 
    	console.log(this.name);
    }
    //嵌套字面量 属性的名称是否加引号：属性名称中包含空格 - 需要加引号
    var person3 = { 
    	name:"jack3";
    };
    //第三种 工厂模式 对象 实例
    function createObj(name){ 
    	//原料
    	var obj = new Object();
    	//加工
    	obj.name = name;
    	obj.action = function(){ 
    		console.log(this.name);
    	}
    	return obj;
    }
    var p = createObj("小侯");
    p.action();
    //第四种 构造函数
    function createObj2(name){ 
    	this.name = name;
    	this.action = function(){ 
    		console.log(this.name);
    	}
    }
    var p2 = new createObj2("小侯");
    p2.action();
    //第五种 公有和私有
    function Person3(name){ 
    	//私有
    	var name = name;
    	var say = function(){ 
    		console.log(name)
    	}
    	//公有
    	return{ 
    		say:say   //通过公开的方法去引用私有的属性
    	}
    }
    var p3 = Person3("小侯");
    console.log(p3.name); //undefined 有点类似闭包的使用
    p3.say();

基本类型与引用类型的区别：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20210702203030784.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]: /images/20221005/4cb07f1835344c5aaba3d6f6de79b61e.png
[20210702203030784.png]: /images/20221005/81388e46cf7940d4a833e12e5e91e834.png