Skip to main content

Javascript教程第十二章:对象原型--对象差异化工具

Javascript教程第十二章:对象原型--对象差异化工具

通过构造函数创建出来的对象,要实现公用动作我们将他添加到原型当中, 这样就不用每次创建一个新对象都要复制这个公用动作给该对象。同时这样,我们将特征属性放在原型之外,就可以保证对象之间的差异性。

一.原型

通过构造函数创建出来的对象,要实现公用动作我们将他添加到原型当中,这样就不用每次创建一个新对象都要复制这个公用动作给该对象。同时这样,我们将特征属性放在原型之外,就可以保证对象之间的差异性。

Object.setPrototypeOf(1,2)      //将2设置为1的原型

Object.getPrototypeOf(hd) //获取原型(直接返回的是上一级原型)

Object.create(prototypeName,对象)

//原型检测:
A.isPrototypeOf(B) //判断的是A对象是否存在于B对象的原型链之中
A instanceof B //判断的是B.prototype是否存在与A的原型链之中

//属性检测:
"name" in a //检测a包括a的原型链是否含有name的属性
a.hasOwnPrototype("name") //只检测a是否有name的属性

1.向原型中添加方法


2.函数的多个长辈,原型

  • prototype是实例化后指向原函数,服务于实例化对象

  • hd.prototype.constructor = hd proto服务于本函数

  • proto(dunder proto):指向hd.prototype.prototype prototype:指向hd.constructor

  • proto和constructor属性是对象所独有的;

  • prototype属性(但函数也是对象)是函数所独有的。

以上这种通过proto属性来连接对象直到null的一条链即为我们所谓的原型链,当调用方法找不到该属性的时候,我们就沿着这条原型链上继续寻找方法

function hd(){
console.log("show");
}
hd.prototype.show = function() {
console.log("hd.prototype.show");
}
hd.__proto__.show = function() {
console.log("hd.__proto__.show");

}
let pp = new hd();
pp.show(); //hd.prototype.show
hd.show(); //hd.__proto__.show

3.借用原型方法

转换方法总结:

  • 1.转换数据类型;
  • 2.借用原型方法;
let input = document.querySelectorAll("input");
Array.prototype.filter.call(input,item => {
console.log(item);
})

4.改变对象原型之create和proto

1.原生方法

//只能改变对象原型但是不能获取,不推荐

let User = {
show(){
return this.name;
}
}
let hd = Object.create(User,{
name : {
value:'houdunren'
}
})
console.log(hd.show());

2.浏览器厂商推出的proto(非官方)

hd.__proto__ = user

3.Object.setPrototypeOf(a,b) (推荐)

Object.getPrototypeOf()

5.proto原来是属性访问器

先看这个例子

let user = {
show(){
console.log(this.name);
}
}
let hd = {
name : "houdurren"
}
hd.__proto__ = user;
hd.__proto__ = 99;
hd.show()

我们设置了proto为99,但我们发现hd仍然可以调用show方法,说明当我们设置proto的时候,会默认进行判断是不是对象

事实上,proto并不是严格意义上的属性,而是一个属性访问器,setter和getter

6.Js是不是真的万物皆对象?

JavaScript中常说 万物皆对象。下面简单分析一下这句话,加深对js的一些深入的理解。

js中数据类型:

  • 1.原始数据类型
  • 2.引用数据类型

原始数据类型:

  • number
  • undefined
  • null
  • string
  • boolean

引用数据类型:

  • object

使用typeof检查数据类型 可以知道 typeof(null)返回的是object。

这是由于计算机存储造成的

在底层存储对象时都是二进制,JavaScript中如果二进制前三位都是0就会被判断为object类型,

null的二进制表示全是0,所以返回的是“object”。

而原始数据类型:number,undefined,null,string,boolean

原始数据类型存储在栈中 他们的存储结构是不能改变的,改变的可以是地址。

7.继承

继承是原型的继承,而不是改变构造函数的原型

function User(){}
User.prototype = show(){
console.log("User.name")
}

function Admin(){}
Admin.prototype.prototype = User.prototype
Admin.prototype.__proto__ = User.prototype

8.继承对新增对象的影响

create和__proto__的差异
create新创建,__protp__改变现有的原型,create没有constructor,而proto有

constructor指向发生改变,并且需要禁止constructor被遍历

当我们通过构造函数创建一个对象的时候,对象默认指向构造函数的原型,而当我们通过create改变构造函数的原型之后,原来的对象也是默认指向原来的构造函原型 (使用__proto__是改变原有的原型,所以不会存在这种问题)