JS高级-原型

115 阅读3分钟

原型

每个构造函数都会有一个默认关联的对象,这个对象就是构造函数的原型

这个构造函数的实例,都可以访问这个构造函数原型中的成员

相关属性

  • 构造函数.prototype:获取构造函数的原型
  • 对象.___proto__可以获取原型 有兼容性问题
  • 原型的constructor可以获取构造函数

应用

全局使用,为某一类对象添加公共的成员

注意细节:对象所有访问的原型是创建这个对象时构造函数所指向的原型,建议后期操作原型使用点语法

原型链

原型是一个对象,对象又有原型,组成原型链

属性查找规则:自己没有,就找原型,一直找到Object,如果还没有就报错

作用域和作用域链

let的作用域是创建let变量开始到它所在的结构的 } 结束

函数内部可以访问函数外部的成员,当查找一个属性的时候,先找自身的作用域,如果没有查找上一级作用域,一直到顶级作用域,如果还没有就报错

函数四种调用模式

函数调用模式

如果一个函数不是一个对象的属性时,就是被当做一个函数来进行调用的。此时this指向了window

function fn(){
  console.log(this);// 指向window 
}
fn();

方法调用模式

当一个函数被保存为对象的一个属性时,我们称之为一个方法。当一个方法被调用时,this被绑定到当前对象

const obj = {
  sayHi:function(){
    console.log(this);//在方法调用模式中,this指向调用当前方法的对象。
  }
}
obj.sayHi();

构造函数调用模式

如果函数是通过new关键字进行调用的,此时this被绑定到创建出来的新对象上。

方法借用模式

也叫上下文模式,分为 apply 与 call,bind

call

call方法可以调用一个函数,并且可以指定这个函数的this指向

//应用   将伪数组转成数组
let divs = document.querySelectorAll('div'); // 伪数组
// let divs = document.body.children;
console.log(divs);

function change(nodelist) {
    console.log(Object.prototype.toString.call(nodelist));
    return Array.prototype.slice.call(nodelist);

}

apply

就是apply()方法接受的是一个包含多个参数的数组。而call()方法接受的是若干个参数的列表

this的指向

单独使用,this 指向全局对象

函数中的 this 指向全局对象

function show(){
    console.log(this); 
}

show();

在函数内部,this 的指向在函数定义的时候是不能确定的,只有函数执行的时候才能确定

const a = 18;
const obj = {
    a: 19,
    b: {
        a: 20,
        c: function () {
            console.log(this.a); 	// 20
        }
    }
}
obj.b.c();

在方法中,this 指代该调用方法的对象

const obj ={
	name:"小白",
	say:function(){
		console.log(this);		
	}
}
obj.say()

箭头函数

格式--定义语法

// 箭头函数是匿名函数,一般做为参数传递
// let test = function (a,b){
//     let sum = a + b 
//     return sum
// }
// let test = (参数) => {函数体}
// 几个小细节
// 1.如果函数体只有一句,那么可以省略{},同时默认会返回函数体的结果,不能写return
// 2.如果只有一个参数,那么可以省略()
// 3.如果没有参数,()也不能省略
// let test = (a,b) =>  a + b 
let test = a =>  a + 10 

let res = test(100)
console.log(res)

特性

// 箭头函数的this是确定的,况且永远不变
// 箭头函数中的this指向  创建这个箭头函数所在对象  的上下文
let obj = {
    name: 'jack',
    say: function () {
        return () => {
            console.log(this) // obj
        }
    }
}
let fn = obj.say()
fn() // obj

let newobj = {}
newobj.fun = fn
newobj.fun() // obj

let rose = {
    name: 'rose'
}

fn.call(rose) // obj