原型
通过之前的例子我们知道
原型就是一个函数
原型对象就是一个函数名的.prototype属性的返回值
实例对象就是new了一个原型的名字返回的结果
知道这个那就好理解了 拿Document和document做一个举例 看看这俩玩意有啥区别又有啥关联.
浏览器打开F12
输入Document发现 这玩意是一个函数 那通过上面的总结是不是发现这东西有点像原型.
行 那我们既然猜测这东西是原型 那肯定有对应的原型对象吧.
尝试用这东西Document.prototype 看看有没有.prototype 属性 发现是有的 看看它的返回值 发现是一个大对象.
看看里面的内容：
这我们是不是能猜测出来 返回的这东西就是prototype挂载的所有内容了.
原型对象
这里用小白的语言给大家解释一下：
原型对象就是一个函数名(原型)的.prototype属性的返回值
或者
原型对象就是一个实例对象的.proto返回结果.
当然还有其他的Api可以获取到这些内容
比如 这个Api 也可以通过原型 转成原型对象
Object.getPrototypeOf("原型")
实例对象
行 那既然知道了Document对象是一个函数 是一个原型了.
我们尝试和小写的document去做一些关联.
纯猜测啊 大写的既然是原型 小写的估计应该是实例对象了
试试呗..
以吾爱的站做个举例 我们输出一下小写的document对象.
发现只有这么点内容.
因为document对象挂载的东西比较多
原型对象Document.prototype 实际上是实例对象的.proto.proto属性 相当于往里面拿了两个.
==至于为啥 这里我也不太了解 正在搜资料..==
不过可以确定的是 最起码这几个东西我们关联上了 大概知道了 原型对象 原型 和实例对象之间的区别了.
正常不应该用这个document对象做举例的 这东西太复杂
如果是正常咱们定义的话 对这几个概念就比较通透了
给大家放一段代码 可以自己运行试试：
//原型 是一个函数
function User(){
}
User.prototype.username = "张三";
User.prototype.password = "密码";
User.prototype.login = function (username,password){
console.log(`${username}登录成功`);
}
console.log("原型",User);
//原型对象 从原型到原型对象
console.log("原型对象",User.prototype);
//实例对象 从原型到实例对象
var user = new User();
console.log("实例对象",user);//本身new出来的是一个空的对象 User {}
user.login("李四","李四的密码"); //但是可以使用原型对象的方法和属性
//从原型对象到原型
console.log("从原型对象到原型 利用构造器",User.prototype.constructor);
console.log("从原型对象到原型 利用构造器",User.prototype.constructor ===User);
//从原型对象到实例对象
var user2 = new User.prototype.constructor;
console.log("实例对象",user2);
//从实例对象到原型对象
var user3 = new User();
console.log("原型对象",user3.__proto__);
console.log(Object.getPrototypeOf(user3) === User.prototype);
//从实例对象到原型
var user4 = new User();
console.log("从实例对象到原型",user4.__proto__.constructor);
console.log(Object.getPrototypeOf(user4).constructor);
输出：
原型 [Function: User]
原型对象 { username: '张三', password: '密码', login: [Function (anonymous)] }
实例对象 User {}
李四登录成功
从原型对象到原型 利用构造器 [Function: User]
从原型对象到原型 利用构造器 true
实例对象 User {}
原型对象 { username: '张三', password: '密码', login: [Function (anonymous)] }
true
从实例对象到原型 [Function: User]
[Function: User]
[复制链接]
发表于 2024-5-3 11:57
|
发表于 2024-5-3 13:11
