前端开发之 JS 原型知识分享

最新推荐文章于 2022-07-12 11:08:59 发布

at小白在线中

最新推荐文章于 2022-07-12 11:08:59 发布

阅读量317

点赞数

分类专栏：前端培训文章标签： javascript 原型模式前端

原文链接：http://www.atguigu.com

版权

前端培训专栏收录该内容

120 篇文章 3 订阅

订阅专栏

1. 普通对象和函数对象

「javascript内部只有普通对象和函数对象」

typeof {} // object
typeof [] // object
typeof function() {} // function
typeof new Function('str', 'console.log(123)') // function
typeof null // object

2. 构造函数

function Person(name, age, job) {
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayName = function() { alert(this.name) } 
}
var person1 = new Person('Zaxlct', 28, 'Software Engineer');
var person2 = new Person('Mick', 23, 'Doctor');

console.log(person1.constructor == Person); //true
console.log(person2.constructor == Person); //true

「实例的构造函数属性指向构造函数」

3. 普通对象和函数对象的属性认识

3.1 Object类型【】

3.1.1 属性特性

「数据属性」

「访问器属性」

3.1.2 Object内部属性和方法

所有对象共有的内部属性

3.2 普通对象和函数对象上prototype对象的属性

3.2.1 普通对象prototype对象

Object.prototype.constructor
Object.prototype.toString ( )
Object.prototype.toLocaleString ( )
Object.prototype.valueOf ( )
Object.prototype.hasOwnProperty (V)
Object.prototype.isPrototypeOf (V)
Object.prototype.propertyIsEnumerable (V)

3.2.2 函数对象prototype对象

Function.prototype.constructor
Function.prototype.toString ( )
Function.prototype.apply (thisArg, argArray)
Function.prototype.call (thisArg [ , arg1 [ , arg2, … ] ] )
Function.prototype.bind (thisArg [, arg1 [, arg2, …]])

3.3 普通对象和函数对象的实例属性

3.3.1 普通对象

除了对象自己创建的属性，然后就是原型链上的属性。

自有属性
原型链上的属性【对应上面3.2.1】

3.3.2 函数对象

非严格模式下：

arguments
length
name
caller
prototype
__proto__

严格模式下：

length
name
prototype
__proto__

3.4 举例

function Person(name, age, job) {
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayName = function() { alert(this.name) } 
}
var person1 = new Person('Zaxlct', 28, 'Software Engineer');

我们可以看到的是：「每个对象都有「proto」属性，但只有函数对象才有 prototype 属性」

「Person.prototype.constructor === Person // true」
「person1.constructor === Person // true」

「function的prototype，其实是当前函数作为构造函数的一个实例。」

4. 原型认识

4.1 举例

  var Person = function(name){
    this.name = name; // tip: 当函数执行时这个 this 指的是谁？
  };
  Person.prototype.getName = function(){
    return this.name;  // tip: 当函数执行时这个 this 指的是谁？
  }
  var person1 = new Person('Mick');

这里可以看到person1的__proto__和Person.prototype。属性前端培训是相同的。

4.2 null

null没有__proto__
null: 代表对象值故意留空的一个原始值，期望引用一个对象。
typeof null = object
Object.prototype.toString.call(null) = "[object Null]"

5. proto和prototype

每个构造器是一个拥有名为“prototype”的属性的函数。「此属性用于实现基于原型的继承和共享属性」。
每个由构造器创建的对象，都有一个隐式引用 ( 叫做对象的原型 ) 链接到构造器的“prototype”属性值。

每个JS对象一定对应一个原型对象，并从原型对象继承属性和方法。对象__proto__属性的值就是它所对应的原型对象。

创建一个函数的时候，js会自动为其添加prototype属性。并且具有contructor【指向当前函数】属性的对象。
当使用函数作为构造函数进行调用的时候，js会通过当前函数作为构造函数创建实例。实例继承构造函数的所有属性和方法。同时还要保持联系，实例通过设置 「[[prototype]]」 指向构造函数的prototype实现继承。

6. 关系

对象类型的成员，标准内置构造器 Function 的一个实例，并且可做为子程序被调用

扩展添加上Function和Object两个内置的函数

上面的图可能看的不是很清晰。我们现在用下面的几种对象和Function来梳理一下：

对象：

Object.prototype
Function.prototype
person1: Person的实例
obj1: 对象字面量
obj2: 通过Object创建的对象
ctr1: 通过ctr创建的对象

函数对象：

function Person
Function
ctr：通过Function创造的函数
Object

代码

var Person = function(name){
  this.name = name; // tip: 当函数执行时这个 this 指的是谁？
};
Person.prototype.getName = function(){
  return this.name;  // tip: 当函数执行时这个 this 指的是谁？
}
var person1 = new Person('Mick');

var ctr = new Function('a, b', 'return a + b');
ctr.prototype.getCtr = function(){
  return this.name;  // tip: 当函数执行时这个 this 指的是谁？
}
var ctr1 = new ctr();

var obj1 = {}

var obj2 = new Object()

这个图还是比较复杂，看不太清楚。所以从上面图中剥离出来每条线。

6.1 对象原型链层级溯源

-person1.__proto__ => Person.prototype.__proto__ => Object.prototype.__proto__ => null

person1是构造函数Person的实例

6.2 函数对象溯源

-Person.__proto__ => Function.prototype.__proto__ => Object.prototype.__proto__ => null

Person函数是Function函数的实例

6.3 函数和对象的关系

person1.contructor = Person。上面的关系是基于对象的角度来说的。对象都具有自己的__protot__属性。
那函数的prototype属性是为了，当函数作为构造函数调用的时候，用于实现原型链接。如果不是作为构造函数使用，function还是可以使北京前端培训用自己原型链上提供的方法，call，bind，apply等等。

6.4 Function.proto === Function.prototype

这里不太好理解为啥要等于。上面的例子当中Person.__proto___ ==== Function.prototype 因为所有的function创建的函数都是Function的实例。Function这里是一个内置的Function对象。Function是Function自己创建的。
<br Function.__proto__ === Function.protottype所以这里的Function的__proto__和prototype都指向Function.prototype。

6.5 null

null没有__proto__
null: 代表对象值故意留空的一个原始值，期望引用一个对象。
typeof null = object
Object.prototype.toString.call(null) = "[object Null]"

null严格意义上来说不是一个对象，只是声明一个变量，期望这里将会指向一个引用对象。

6.6 Object.create(null)

var obj1 = Object.create(null);
function TestNull() {};
var obj2 = new TestNull();
TestNull.prototype = null;
var obj3 = new TestNull();
var obj4 = {};
var obj5 = new Object();

我们看一下结果：

**obj1: **

**obj2: **

「obj3 / obj4 / obj5:」

Object.create(Object.prototype) 就可以和{}的结果相通。Object.create(null)创建的是一个纯净的对象，没有原型链。

7. typeof和instance判断的原理

typeof 原理

typeof: 基于变量在机器码存储的类型信息：
js 在底层存储变量的时候，会在变量的机器码的低位1-3位存储其类型信息：

1：整数
110：布尔
100：字符串
010：浮点数
000：对象
null：所有机器码均为0
undefined：用 −2^30 整数来表示

所以在用 typeof 来判断变量类型的时候，我们需要注意，最好是用 typeof 来判断基本数据类型（包括symbol），避免对 null 的判断。

instanceof原理

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链.

console.log(Object instanceof Object);//true 
console.log(Function instanceof Function);//true 
console.log(Number instanceof Number);//false 
console.log(String instanceof String);//false 

console.log(Function instanceof Object);//true 

console.log(Foo instanceof Function);//true 
console.log(Foo instanceof Foo);//false

8. 问题？

8.1 如何理解原型链？原型链是什么？

是属性共享和自由属性的一种控制。共有属性可以通过原型。原型链侧重于多类构造函数创建的多类实例对象具有部分一致的行为描述。

原型链的定义：每个由构造器创建的对象，都有一个隐式引用 ( 叫做对象的原型 ) 链接到构造器的“prototype”属性值。再者，原型可能有一个非空 (non-null) 隐式引用链接到它自己的原型，以此类推，这叫做原型链。

具体例子如下：

function Person(name, age, job) {
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayName = function() { alert(this.name) } 
}

function Children(name, age, job) {
 this.childrenName = name;
 this.childrenAge = age;
 this.childrenJob = job;
 this.childrenSayName = function() { alert(this.name) } 
}

var person1 = new Person()

Children.prototype = person1
var child1 = new Children()