js面向对象||this指向||call和apply方法的使用和区别

首先 内置对象有比如String Array 等等

String 的属性有 length
方法有 substring slice concat 等等

接下来

我们就可以利用prototype方法来给String 来创建属性和方法 比如说:

String.prototype.big="这是一条自创属性"

这条是说 我给所有的String都添加了一个属性 叫做big 属性的内容是"这是一条自创属性"

在这之后 我就可用调用这条属性 比如说

var str="我我我";
	console.log(str.big)
控制台就会输出     ----"这是一条自创属性"

同理,可以创建属性,也可以创建方法

String.prototype.alex=function(){
alert(“这是一个自创的方法”)
}

调用的时候就是 str.alex()
就和用其他方法时一样 加括号.

this指向.

首先 函数分为工厂函数 和 构造函数
工厂函数是指最 平常的函数 比如

 function arr(){
		alert(1)
}
工厂函数怎么调用?
arr()
对吧

这叫工厂函数–工厂流水线生产出来的有标准规格的函数
自己瞎理解的

构造函数是什么?

 function lol(name,tall){
 	this.nam=name;
 	this.tall=tall;
 	this.fuck=function(){
		alert(this.nam+"的身高是"+this.tall)
		console.log(this)
	}
 }

构造函数调用的时候是这样的

var s= new lol("王大锤","18")

用到了new
构造函数最大的特点就是可以给这个函数定义新的属性和方法
就比如上边的函数
我给他创建了一个叫nam的属性,属性值是name.同理创建了一个tall属性

同时我还给他创建了一个方法叫fuck
如何使用这个fuck方法呢?
当我们上边声明了 var s=new lol();
之后我们就可以使用方法了
s.fuck()

到这一步我们有一个必须要区分的点就是

工厂函数中 this指向的是 window;
而构造函数中 this 指向的是 该函数

function sa(){
		console.log(this)
	}
sa()

function Lis(name,tall){
	this.nam=name;
	this.tall=tall;
	this.fuck=function(){
		alert(this.nam+"的身高是"+this.tall)
		console.log(this)
	}
}
	var s= new Lis("王大锤",180);
		s.fuck()

可以复制这两段代码看一下. sa()输出的是Window 说明工厂函数的this 指向的是Window
Lis()输出的是Lis 说明构造函数中this指向的是该函数自身.

接下来还有一个重点

function Lis(name,tall){
	this.nam=name;
	this.tall=tall;
	this.fuck=function(){
		alert(this.nam+"的身高是"+this.tall)
		console.log(this)
	}
}

构造函数没有问题

Lis.prototype.xm="ani";
	Lis.prototype.sod=function(){
		alert("我看得到快加我")
	}

如果我给这个Lis使用prototype方法 给他自定义属性和方法会怎么
上方代码中 我给他添加一个xm属性 属性值为ani
添加sod方法,方法内容为弹框
试验一下

var sb= new Lis("王大锤",175,);
sb.fuck()
	sb.sod()
	console.log(sb.xm)

一条一条看啊
首先fuck()方法可以运行 王大锤的身高为175;
那sod()方法呢?
同样可以运行 我看得到快加我
console.log(sb.xm)也可以看到输出的是ani.
那就说明 Lis.prototype方法起作用了 我给这个Lis添加了属性和方法.
but

如果我在最后console.log 一下我声明的这个sb

  var sb= new Lis("王大锤",175,);
    sb.fuck()
    	sb.sod()
    	console.log(sb.xm)
    console.log(sb)  //我在最后在控制台查看我的这个sb

控制台会给我显示什么

我的LIs()中 只有我一开始在函数中自己声明的fuck()方法,nam属性 tall属性.
完全没有我后来使用Lis.prototype自定义的sod()方法和xm属性.

这说明:Lis.prototype 声明的方法属性不会出现在Lis的内部.
相当于外包人员?还是自己瞎理解的啊,可以替Lis干活,但不在Lis公司的员工名单中.命苦的外包.

说这么多 最主要要说明的就是

工厂函数的this 指向的是Window
构造函数中this指向的是该函数自身.

apply()与call()的用法和区别

apply和call都是用来一个对象调用另一个对象的方法

什么意思呢?

function Lis(name,tall){
	this.nam=name;
	this.tall=tall;
	this.fuck=function(){
		alert(this.nam+"的身高是"+this.tall)
		console.log(this)
	}
}
	
	
function Leo(){

}

上边代码中,Lis是一个对象,Leo是一个对象.
Lis中有自定义的方法和属性
Leo中什么也没有
如果我想Leo中调用Lis中他自定义的方法我该怎么办

 function Lis(name,tall){
    	this.nam=name;
    	this.tall=tall;
    	this.fuck=function(){
    		alert(this.nam+"的身高是"+this.tall)
    		console.log(this)
    	}
    }
    	
    	
    function Leo(){
Lis.call(this);
Lis.apply(this)
    }


var l2= new Leo("王大锤",198);
 	l2.fuck()

call和apply两种方法都可以 使用一条就好

此时.我们的fuck()方法成功运行了
但是呢

对吧,fuck()方法实现了 弹窗了 但是那两个属性值为什么是undefined呢?

因为我的新对象中没有声明形参,而且我的call和apply中也没有将第一个对象中的形参拿过来 所以
正确的做法应该是这样

function Lis(name,tall){
	this.nam=name;
	this.tall=tall;
	this.fuck=function(){
		alert(this.nam+"的身高是"+this.tall)
		console.log(this)
	}
}
		Lis.prototype.cc=function(){
		alert(1)
	}    //如果对象1中有用prototype新建的方法 比如这个cc(), 我下边是调用不到的,
	就是说我直接在下边用  l2.cc() 是出不来的
	//这个时候下边就要来一条
	
function Leo(name,tall){
	Lis.call(this,name,tall);
	Lis.apply(this,[name,tall])
}
Leo.prototype= new Lis();  //来一条这个,对象2 prototype= new 对象一();

var l2= new Leo("王子",198);
	l2.fuck()

这样,就可以成功将第一个对象中的形参和自定义属性偷到我第二个函数中
这就是对象的调用—apply方法和call方法

现在还有一个问题,call和apply作用是一样的,都是将对象中的属性方法调用给另一个对象.
那么他俩有什么区别呢?

用法不同

Lis.call(this,name,tall);
call方法中可以有多个参数,你可以一直，，，，，，隔下去

Lis.apply(this,[name,tall])
apply方法中只有两个参数， 第一个 this 指向对象， 第二个是 【】数组 对吧
但其实你数组中放多少了参数都可以，你一样可以一直，，，，，下去

所以两者就是格式不同而已 记住分别如何使用就可以了