盘点js基本知识点(一)

知识没人嫌多,当人不断往前走,不断接触新知识,却不经意间遗忘了最基本的东西,不知这算不算是痕迹衰退说的一种体现。有时候我们大部分人就是这样,这也是很多人知其然而不知其所以然的原因。趁着上班的空闲,整理下快淡忘的最基本知识点。

数据类型

在javascript中,数据类型,大致分为两大类: 普通的值类型:undefined string number boolean; 引用类型: Function null Array Object等;
区分值类型,可使用typeof:

console.log(x)-- undefined
console.log(1) -- number

console.log(null) -- object
console.log(function(){}) -- function
console.log(new Number(1)) -- object

可以发现,typeof只能简单区分数据类型,如果需要判断是否为对象,则需要使用instanceof:

var fn = function() {};
console.log(fn instanceof Object) -- true
变量作用域与作用域链

作用域就是控制着变量或函数的可访问范围,在javascript中,变量分为全局作用域和局部作用域。全局变量是指在全局下声明的,在代码中任何地方都能访问到的变量或者未声明变量直接赋值的变量;局部变量是指在函数内部声明的变量,只限于内部访问。
但值得注意的是,当我们取变量值时,应当从创建函数的那个作用域中取值,而不是调用该函数的那个作用域,如:

var a = 8;
function fn() {
    var a = 2;
    return function b() {
        console.log(a)
    }
}
var f1 = fn();
f1()   //  2

那么作用域链又是什么呢。就好比如上面运行f1函数时,从fn中取变量a的值,如果没有,就会往上一层的作用域取,如果还没有就会一直往上一层取值,直到访问全局作用域,其经过的路线就是作用域链。
从作用域链的结构可以看出,在运行期上下文的作用域链中,标识符所在的位置越深,读写速度就会越慢。因此,在编写代码的时候应尽量少使用全局变量,尽可能使用局部变量。

变量声明前置

相信这个坑了不少人。什么是变量声明前置,来个例子:

var a = 8;
function fn() {
    console.log(a);
    var a = 4;
    console.log(a)
}
fn();    // undefined 和 4

为什么第一次a是undefined呢?这是因为再次声明a变量时,a前置了。实际上成了这样:

var a = 8;
function fn() {
    var a;
    console.log(a);
    a = 4;
    console.log(a)
}
fn();  // undefined 和 4

再来个例子:

console.log(fn) // function fn() {console.log(6);}
console.log(b) // undefined
var fn = function() {
    console.log(b);
}
function fn() {
    console.log(6);
}
var b = 5;
fn(); // 5

等等,为什么第一个fn不是undefined呢,第三个打印出来的不是6呢?这就是变量声明前置的导致。事实上应该是这样的:

function fn() {
    console.log(6);
}
var fn
var b;
console.log(fn) // function fn() {console.log(6);}
console.log(b) // undefined
fn = function() {
    console.log(b);
}
b = 5;
fn(); // 5

所谓变量声明前置就是指在一个作用域块中,所有的变量声明全部被放于块的开始那,同时函数的定义会被置于块的最前面。

原型与原型链

一切引用类型变量都是对象,一切对象都是由函数生成,由此可知,对象与函数的关系并非是包含与被包含的关系。可能有人说,var arr = [1, 2, 3] 就不是函数生成的啊,其实,它也是,这只是一种语法糖,其相当于

var arr = new Array();
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;

在javascript中,函数统一会被默认有一个prototype属性,属性值为对象--属性的集合,因此你也可以对函数进行自定义属性。在prototype属性值中,默认会有一个叫做constructor的属性,指向这个函数本身。

function Fn() {
    this.name = "asd";
    this.age = 18;
    Fn.prototype.showName = function() {
        return this.name;
    }
    Fn.prototype.trait = "human";
}
var fn = new Fn();
console.log(fn);

你会发现,通过new实例化的fn对象不但有两个属性,同时还存在一个隐藏属性“__ proto__”。
记住一句话:在javascript中,任何函数都有一个prototype,即原型;任何一个对象都有一个__ proto__,即隐式原型(谨记:函数的原型只能通过构造函数的方式来设置)
对象中的 __ proto__ 指向了创建该对象的函数的prototype。即:fn.__ proto__ === Fn.prototype;
如果函数不是通过构造函数实例化出来的呢?如

function fn() {};
console.log(fn.prototype, fn.__proto__)

你会发现,打印出来的是一个空对象和undefined。其实,自定义函数和var obj = {}一样,都是被Object创建的,所以它的__ proto__指向的是Object.prototype。而不巧的是,Object.prototype是一个特例,它的__ proto__指向的是null。
再看一个例子:

function Fn() {
    this.name = "asd";
    this.age = 18;
    this.sex = "0";
    Fn.prototype.showName = function() {
        return this.name;
    }
    Fn.prototype.trait = "human";
    Fn.prototype.sex = "1";
}
var fn = new Fn();
console.log(fn.sex, fn.trait); // 0 human

fn是Fn函数new出来的对象,fn.sex是fn对象的基本属性,fn.sex为0,这很好理解,那么fn.trait的值又是怎么来的呢?—— 访问一个对象的属性时,会先在对象的基本属性上面查找,如果没有,就会沿着__ proto__这条链向上查找,这就是原型链。

继承

其实,原型链就是一种继承的体现,之所以将原型链与继承分开来讲解,继承比较复杂,实现的方式也比较多,当然优缺点都存在,这里就不一一展开来说,只做简单讲解,毕竟网上对于js的继承方式种类,描述的都相当清楚。
要实现继承,首先得存在一个父类,即构造函数:

// 创建父类Animal
function Animal() {
    // 私有属性
    var a = "属性"; // 私有基本属性
    var b = function() {}; // 私有引用属性(私有函数)

    // 实例属性
    this.name = arguments[0] || "白白"; // 实例基本属性
    this.type = "动物";
    this.showName = function() {
        return this.name;
    }; // 实例引用属性(实例函数)
}

Animal.prototype.types = ["猫", "狗"]; // 原型引用属性
Animal.prototype.showType = function() {
    return arguments[0] || this.type;
}; // 原型引用属性(实例函数)

来个继承的例子:

function Parent() {
    this.arr1 = [10];
    this.arr2 = [12];
}
Parent.prototype.showArr1 = function() {
    return this.arr1;
}
Parent.prototype.addArr1 = function() {
    this.arr1 = this.arr1.concat(arguments[0]);
}
Parent.prototype.showArr2 = function() {
    return this.arr2;
}
Parent.prototype.addArr2 = function() {
    this.arr2 = this.arr2.concat(arguments[0]);
}

function Fn() {
}

Fn.prototype = new Parent();

var f1 = new Fn();
var f2 = new Fn();
f1.arr2.push("fn");
console.log(f1.showArr2(), f2.showArr2()) // [12, "fn"] [12, "fn"]
f1.addArr1("fn");
console.log(f1.showArr1(), f2.showArr1()) // [10, "fn"] [10]

使用两种方法,你会发现,打印出来的结果不一样,为什么会这样呢?首先第一次打印,f1对象是没有arr2属性的,故其需要沿着原型链向上获取该属性,然后进行修改,此时修改的是创建f1的构造函数Fn里面的原型属性,所以f1和f2打印出来的是Fn的原型属性,结果是一样的。
第二次打印是调用addArr1方法,这个方法是Parent的原型方法,原型方法里面涉及到this,指向的是f1对象,故相当于f1添加了个基本属性arr1。因此f1和f2打印出来的不一样。

这种继承方法缺点也是很明显的,就是无法实现多继承,父类的原型属性是所有实例共享的,创建子类实例时,无法向父类构造函数传参。为了解决该缺点,引入了call和apply:

function Parent(arr1, arr2) {
    this.arr1 = arr1 || [10];
    this.arr2 = arr2 || [12];
}
Parent.prototype.showArr1 = function() {
    return this.arr1;
}
Parent.prototype.addArr1 = function() {
    this.arr1 = this.arr1.concat(arguments[0]);
}
Parent.prototype.showArr2 = function() {
    return this.arr2;
}
Parent.prototype.addArr2 = function() {
    this.arr2 = this.arr2.concat(arguments[0]);
}

function Fn() {
    Parent.call(this, [1], [2]);
    
}

var f1 = new Fn();
var f2 = new Fn();

console.log(f1, f2)

好吧,你会发现,解决了上个例子暴露的问题,但又掉入另一个坑...好吧,具体建议还是去看大神整理的文档吧,我对继承也是限于基础

闭包

要了解闭包,必须先了解变量的作用域,前面也讲解过变量的作用域与作用域链。父对象的所有变量对子对象都是可见的,可读取的;反之,子对象的所有变量对父对象都是不可见的。而闭包的作用就在这里,它能够在其它函数的外部读取到其内部的变量的函数。
来个例子:

var a = 6;
function fn() {
    var a = 1;
    return function() {
        console.log(++a)
    }
}

var f1 = fn();
f1() // 2
f1() // 3

变量a是函数fn内部的一个变量,每执行一次f1,就会使得a加一,并保留在内存中,不会被Javascript的垃圾回收机制回收。
在闭包中,尤其注重两点:
1.变量取值应当从创建闭包函数的那个作用域中取值,而不是调用该函数的那个作用域。
2.谨慎处理this的指向对象

var obj = {
    fun: function() {
        console.log(this)
        return function() {
            console.log(this)
        }
    }
}
obj.fun();
var fun = obj.fun;
fun();
obj.fun()();

你猜分别打印什么?

你可能感兴趣的:(盘点js基本知识点(一))