从PHP的角度看JS的原型

从PHP的角度看JS的原型

提示:这是一篇JS的讲解文档



前言

JS的原型是JS的很重要的知识,为后续学习理解一些问题和代码的逻辑的总要基础,但是JS的原型又很绕,导致笔者也有类似的觉得很晕的地方,现在就以PHP面向对象的角度来对比着学习JS原型,解开JS原型的面纱。


提示:笔者也是刚刚开始研究,难免有解释不得当的地方,如有纰漏,请指正。

一、JS中的方法和PHP中的类

1.JS原型是什么?

        原型是JS为了能够像后端语言一样可以进行面向对象编程而引入的。面向对象的三大法宝,封装、继承、多态。原型是为了解决继承的问题。
         来看PHP中的继承:
Class Person(){
	public function sayHello(){
		echo "你好!";
	}
}

Class Man extends Person(){
	public function showGender(){
		echo "我是男生!";
	}	
}

$man = new Man();
$man->sayHello();//你好!

        
一个最简单的继承用PHP就写好了。实例化Man后就可以调用Person中的sayHello方法。
那么这个内容要在JS中该如何实现呢?来看JS的做法。

function Person(){
	this.sayHello = function(){
		console.log('你好!');
	} 
}

function Man(){
	this.showGender = function(){
		console.log('我是男生!');
	}
}

Man.prototype = new Person();
//或者写成Man.__proto__ = new Person();

var man = new Man();
man.sayHello();//控制台输出:你好!

        
JS是一门神奇的语言,function其实也是对象:那么我们还可以这样来写:

var person = {
	sayHello:function(){
		console.log('你好!');
	}
}
var man = {
	showGender:function(){
		console.log('我是男生!');
	},
	__proto__:person
}
man.sayHello();

        
这里最让人绕的地方就是__proto__ 和 prototype这俩个内容。虽然这俩个内容看起来是相同的,但是却不能互换,在对象中是没有prototype的属性的(在PHP中就是类的属性,或者说字段)。
只要深刻了解了__proto__ 和prototype之间的区别就算是把原型弄懂了。
从PHP的角度来看,__proto__和prototype就是类似extends的东西,PHP中类的继承用extends,那现在JS变成了__proto__和prototype。这样理解是不是就容易点了。

2.原型链

js中所有的对象(对象就包括了function)的__proto__都指向了object.prototype。来看代码。

var person = {
	sayHello:function(){
		console.log('你好!');
	}
}
var man = {
	showGender:function(){
		console.log('我是男生!');
	},
	__proto__:person
}
// man.sayHello();
console.log(man);

打印man对象的内容
可以看到,man对象中__proto__ 指向了sayHello(我们制定的),而sayHello的__proto__ 的constructor指向了object或者说__proto__指向了object.prototype.看下简单的示意图:
原型链中各个内容的关系图

看到这幅图是不是有点明白了,绕的地方就是对象的__proto__指向了object.prototype,而object.prototype中呢,有个构造函数constructor,它指向object。
而function又是一个特殊的对象,它和object是一样的(都拥有一个prototype,而prototype中又存在一个constructor指向function)。


总结

好了,就说这么多吧,希望大家能深刻理解原型。
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页