Javascript 基础 And 进阶

知识点:

原型链

this指向

作用域和预解析

new关键字

闭包

DOM事件

继承

原型链

面试题(一):

var F = function() {};

Object.prototype.a = function() {

  console.log("aa");

};

Function.prototype.b = function() {

  console.log("bb");

};

var f = new F();

F.a();  //aa

F.b();  //bb

f.a();  //aa

f.b();  // 抱错,f.b is not a function

面试题(二):

function A() {

    this.name = 'a'

    this.color = ['green', 'yellow']

}

function B() {

}

B.prototype = new A()

var b1 = new B()

var b2 = new B()

b1.name = 'change'

b1.color.push('black')

console.log(b2.name)  // change

console.log(b2.color)  // green yellow black

this指向(有四种)

第一种:方法调用

var age = 38;

var obj = {

    age: 18,

    getAge: function() {

        console.log(this.age);

    }

};

obj.getAge();

--------------------------------------------------

// 变式:

var fn = obj.getAge;

fn();

第二种:函数调用,里面的this指向的是window

var age = 38;

var obj = {

    age: 18,

    getAge: function() {

        var fn = function() {

            console.log(this.age);

        };

        fn();

    }

};

obj.getAge();

第三种:构造函数调用:this指向调用它的对象

var age = 38;

var obj = {

    age: 18

};

var getAge = function() {

    console.log(this.age);

};

obj.get = getAge;

obj.get();

第四种:上下文调用模式,this指向谁?指向的是传入的对象

call 和 apply

作用域和预解析

let var const 函数作用域 {}

new 关键字的作用

1、在函数里面创建一个对象obj

2、将函数里面的this指向创建的那个对象obj

3、返回这个obj对象

综合面试题:

function Foo() {

    getName = function(){ alert(1); };

    return this;

}

Foo.getName = function() { alert(2); };

Foo.prototype.getName = function(){ alert(3); };

var getName = function() { alert(4); };

function getName(){ alert(5); }

Foo.getName();           

getName();               

Foo().getName();         

getName();               

new Foo.getName();       

new Foo().getName();     

new new Foo().getName();

闭包

闭包的概念:

闭包的使用场景:

闭包的问题:让变量得不到释放,增加内存使用率

var counter = (function() {

  var privateCounter = 0;

  function changeBy(val) {

    privateCounter += val;

  }

  return {

    increment: function() {

      changeBy(1);

    },

    decrement: function() {

      changeBy(-1);

    },

    value: function() {

      return privateCounter;

    }

  }; 

})();

DOM 事件

给DOM 添加点击事件:

dom.onclick = function(){}

dom.addEventListener(事件类型 事件处理函数 冒泡或者捕获)

区别:onclick 会覆盖相同的事件,addEventListener会逐一的触发

DOM 事件三要素: 事件源, 事件类型, 事件处理程序

事件流程: 冒泡,捕获

继承

ES5的继承

1、构造函数实现继承

    function Parent(){

            this.name = "parent"

        }

    Parent.prototype.aa=function(){}

    function Child(){

        Parent.call(this)

        this.type ="child"

    }

    console.log(new Child())

2、借助原型是实现继承

    function Parent(){

        this.name = "parent"

        this.arr = [1,2,3]

    }

    function Child(){

        this.type = "child"

    }

    Child.prototype = new Parent()

    var A = new Child()

    var B = new Child()

    A.arr.push(4)

    console.log(A,B)

3、组合方式实现继承

function Parent(){

    this.name = "parent"

    this.arr = [1,2,3]

}

function Child(){

    Parent.call(this)

    this.type = "child"

}

Child.prototype = Object.create(Parent.prototype)

Child.prototype.construcotr = Child

var A = new Child()

var B = new Child()

A.arr.push(4)

console.log(A,B)

ES6的继承

class People{

        constructor(name,age){

            this.name = name

            this.age = age

        }

    eat(){

    }

}

class Student extends People{

    constructor(id,name,age){

        super(name,age)

        this.id = id

    }

}

你可能感兴趣的:(Javascript 基础 And 进阶)