JavaScript之this关键字指向+构造函数+原型+原型链

一.this关键字

this：无法直接确定指向

this的指向以最终驱动的对象为主。

环境	this指向
自定义函数中	window
构造函数中	当前实例对象
dom事件函数	当前节点对象
普通对象,json对象	当前对象
定时器（function（），100）	window

改变指向：

1.变量替换

2.箭头函数

基于函数（function）来调用：

实现继承（args，args2）

形式	运行机制	参数
**function.**calll（obj,args.args2…）	即时调用函数，基于继承	参数（构造函数的参数）都是单个变量
**function.**apply（obj,[args,args2…]）	即时调用函数，基于深拷贝（复制）	参数都是数组
**function.**bind（obj,args,args2…）	非即时调用函数，基于深拷贝（复制）	参数都是单个变量

语法

//普通函数
function fn(){

}
fn.call();

//匿名函数
function(){}.call()

二.构造函数（名字开头大写，用来new的）

function :构造函数

//自定义函数

function hello（）{



}

hello（）；

//构造函数（名字开头大写，用来new的）：构建类对象

function Person(){


}

var obj =new  Person()

1.系统内置构造函数：

Array()------>[] new Array()

Object()----->{} new Object()

String() 包装类

Nunmber() 包装类

Boolean() 包装类

Set()

…

2.包装类

包装类：将一些普通数据类型转换为对应的数据类型

var str=new String(err)

字符串转数字：

“123abc”

pasreInt()

parseFloat()

var num=new Number(str);

3.ES6以前

类：构造函数

function Person(){

//定义属性
this.sex="男"
this.age=18
//定义方法
this.fn=function(){
		console.log(this.sex,this.age)
}
this.fn2=function(){
		this.fn();
}

}



//实例化产生对象
var per=new Person();
console.log(per);

ES6以后：

类：class

class Person{

}

3.（显示）原型：portotype

原型是一个普通对象：

1.只有构造函数才具备该属性

2.共有属性可操作

3.原型对象（prototype）会被基于当前某个构造函数所产生的对象继承

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qSL6vDFB-1649160066468)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20220401145519963.png)]

function Students(){}
Students.prototype
var stu=new Students()

Students.prototype=={
	//构造器：记录当前对象产生所依赖的构造函数
	constructor：  f()  Students{}  构造器，构造函数
	//构造器constructor
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qGYunbA2-1649160066479)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20220401145713615.png)]

***使用场景：

1.共享构造函数的公共的属性与方法

①效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3yq30VtS-1649160066480)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20220401112931237.png)]

②效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-APZO27Pl-1649160066481)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20220401112916872.png)]

2.全局方法

Object.prototype

2.继承(类与类的es5)

PS：原型链紊乱问题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6HmDOZeq-1649160066481)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20220402092057582.png)]

***①call 和apply实现继承

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L9M30T1H-1649160066482)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20220402092405122.png)]

***②原型直接继承

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z5hSqIvP-1649160066483)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20220402092529504.png)]

3.es6 关键字 extends

4.隐式原型：_ _ proto _ _ [[protitype]] 浏览器中

1.只有对象（普通对象，函数对象）才具备 {}才具备

2.私有的对象属性，不可操作

3.一个对象的隐式原型**指向（继承）**它的构造函数的原型

三.原型链

构造函数 prototype 对象 _ _proto _ _之间的关系链

用来描述 隐式院系与显示原型的关系链

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wbgthYTt-1649160066485)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20220401165127949.png)]

ps：null（内存）

所有对象的父对象都是0bject object父对象是null（内存）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yyv9i2nL-1649160066485)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20220401153440955.png)]

图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MqcLfEy3-1649160066487)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20220401161610462.png)]