javascript基础总结

最新推荐文章于 2022-11-07 10:42:15 发布

paisila

最新推荐文章于 2022-11-07 10:42:15 发布

阅读量73

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/paisila/article/details/105310098

版权

Javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

javascript基础总结

JS变量、作用域

变量

变量是为了保存数据，数字、字符串、布尔值、对象、数组等等都是数据，有些数据仅使用一次，有些却需要使用多次，使用多次的数据就得有一个保存数据的容器
基本类型：有boolean,number,string,null,undefined,操作的是保存在变量中的值。

基本类型的值不能被修改

var str ="Hellow";
// str.replace('s','');
console.log(str.replace('H','')); // 输出ellow
console.log(str); // 输出Hellow

可见使用replace方法之后返回的是一个新的字符串，而不是对原有值进行修改

基本类型若要使用方法，先找到其包装对象，包装对象借方法给基本类型
基本类型的变量是存放在栈内存（Stack）里的
基本类型的比较是值的比较

引用类型：包括数组、对象等，与基本类型不同的是它拥有属性和方法

引用类型的值是可变的，可以为引用类型添加/删除（delete）属性和方法
引用类型的值是同时保存在栈内存（Stack）和堆内存（Heap）中的对象（Object）
因为javascript不能直接操作对象的内存空间，操作的是对象的引用，所以引用类型的值是按引用来访问。引用类型的存储由内存的栈区和堆区完成，栈区内存保存变量标识符和指向堆内存中该对象的指针。
```
var obj = {
  name: "Dell",
  age: 22
}
obj.age = 23;  // 操作对象
```

引用类型的比较是引用的比较

var obj1 = {
  name: "Dell",
  age: 22
}    
var obj2 = {
  name: "Dell",
  age: 22
}
console.log(obj1 == obj2); // false 地址不同
// 如果比较的是引用类型的值：
function compareObj(obj1,obj2){
  for( var p in obj1){
    if(obj1[p] !== obj2[p]) return false;
  }
  return true;
}
console.log(compareObj(obj1,obj2)); // true 值相等

引用类型的赋值是把一个数据的引用复制给另外一个数据，两者指向同一个地址，相互影响。

var obj1 = {
  name: "Dell",
  age: 22
}  
var obj2 = obj1;
obj2.age ++;
console.log(obj1.age); // 23
console.log(obj2.age); // 23

若引用类型仅含有基本类型，可采用浅拷贝获取一份独立的数据

function copyObj(obj){
  var newObj = {};
  for(var p in obj)
    newObj[p] = obj[p];
  reutrn newObj;
}

而基本类型的复制只是两个变量的简单复制，两者互不影响

var a = 2;
var b = a;
b ++ ;
console.log(a); // 2
console.log(b); // 3

参数传递：基本类型传递的是值，而引用类型传递的是地址

function changeAge(obj){
  obj.age = 22; // obj与obj1的地址相同
  obj = {}; // obj指向了另外一个类，不影响obj1
  obj.age = 23;
}
var obj1 = {};
changeAge(obj1);
console.log(obj1.age); // 22

检测类型：typeof不能区分null、数组和对象等,instanceof是针对引用类型的

console.log(typeof([])); // object
console.log(typeof({})); // object

console.log([] instanceof Array); // true
console.log([] instanceof Array); // true
console.log({} instanceof Array); // false

作用域:变量的生命周期，变量起作用的范围

函数作用域、全局作用域、ES6的块作用域

作用域是分层的，内部作用域可以访问外部作用域，反之不行。全局作用域有变量a和x，函数fn1内部有变量a和函数fn2，函数fn2内部有变量a，这一层一层的关系就是作用域链。访问某一变量的时候，会从当前区域开始一层一层的往外部寻找，直到全局作用域。

var a = 5;
var x = 6;
function fn1(){
    var a = 10;
    function fn2(){ // 创建函数
        var a = 20;
        // 取变量a和x时，先在当前函数作用域寻找，再逐步向上寻找     
        console.log(a); // 20
        console.log(x); // 6
    }
    fn2(); // 调用函数
}
fn1();

JS解析机制:预解析之后逐行执行代码
预解析：变量为undefined,函数整块拿来；变量名和函数名冲突留函数；函数与函数名冲突留最后声明的

console.log(a); // a() a是函数
var a=1;
console.log(a);
function a(){
    console.log(2);
}
// a(); // 报错，a不是函数，无法执行下去
console.log(a); // 1
var a=3;
console.log(a); // 3
function a(){
    console.log(4);
}
console.log(a); // 3
a(); // 报错，a不是函数 

// // 预解析之后a是函数
// function a(){
//     console.log(4);
// }

JS函数

三种定义方式

// 1. 在函数声明前面或者后面调用
function fn(){ }
fn();
// 2. 赋值给变量，只能在定义后面调用,预解析
var add = function(){ };
// var add = function fn(){ };
add();
// 3. 构造函数
var add = new Function();
add();

reverse() 方法用于颠倒数组中元素的顺序，split(),join()

JS面向对象

声明对象

字面式

var person = {
  name: 'Dell',
  age: 29
};
person.job = 'Software Engineer'; // 添加新属性

new操作符后跟Object构造函数

var preson = new Object();
person.job = 'Software Engineer'; // 添加属性

构造函数模式：不用显式创建对象和返回对象，属性和方法赋值给this

function Person(name,age){
  this.name = name,
  this.age = age
  // this代表当前对象，通过this访问对象和属性
}
// preson1与person2相互独立
var person1 = new Person('Nicholas',29);
var person2 = new Person("Dell", 30);

工厂模式:在方法内部创建Object对象，为Object对象添加属性和方法，并返回Object对象

function Person(name,age,job){ // 载入内存，准备调用
  var obj = new Object();
  obj.name = name;
  obj.age = age;
  obj.sayName = function(){
    console.log(this.name);
  }
  return obj;
}
// friend1与friend2相互独立
var friend1 = Person("Nicholas", 29, "Software Engineer");
var friend2 = Person("Dell", 30, "Software Engineer");
console.log(friend1.sayName == friend2.sayName); // false

原型模式
我们创建的每一个函数都有一个prototype(原型)属性，它是一个指向对象的指针。按照字面意思理解prototype就是通过调用构造函数而创建的那个对象实例的原型对象。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。

function Person(){
    Person.prototype.name = "Nicholas";
    Person.prototype.age = 29;
    Person.prototype.job = "Software Engineer";
    Person.prototype.sayName = function(){
        console.log(this.name); 
    };
}
// // 另一种更简单的方式
// function Person(){}
// Person.prototype = {
//     name: 'Dell',
//     age: 29,
//     job: 'Software Engineer'
//     sayName: function(){
//         console.log(this.name);
//     }
// }
var person1 = new Person();
var person2 = new Person();
console.log(Person.prototype instanceof Object); // true
console.log(person1.sayName == person2.sayName); // true
// 与构造函数不同的是，新对象的属性和方法是由所有实例共享的

混合模式：组合使用构造函数模式和原型模式。构造函数用于定义实例属性，原型模式用于定义方法和共享的属性。该模式使用广泛，认同度高。(原型中所有属性是被多个实例共享的，若属性包含引用类型值，这种模式就不共享引用类型值)

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ["Shelby", "Court"];
}
Person.prototype = { // 重写了原型对象
    sayName: function(){
        console.log(this.name);
    }
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Dell", 30, "Software Engineer");

任何模式下，同种模式中的创造出来的对象都是独立存在的

对象属性和方法的遍历

var cat = {
    'name': 'Kity',
    'age': 2,
    'color': 'white'
};
delete cat.age;// 删除属性
console.log('name' in cat);// true 
// 遍历属性
for(var p in cat){
    // console.log(p);// 属性名
    console.log(cat[p]); // 属性值
}