无标题文章

js 原型继承方面的理解

1.constructor 构造器

1.1 函数的构造器全部指向的是  Function

eg:

function Foo(param1, param2) {

this.param1 = param1;

this.param2 = param2;

this.say = function () {

console.log(this.parma1, this.param2);

}

}

console.log(Foo.constructor);  // ƒ Function() { [native code] }

function foo() {

console.log('this is a function');

}

console.log(foo.constructor);  // ƒ Function() { [native code] }

1.2 函数的实例的构造器指向

eg:

function Foo(param1, param2) {

this.param1 = param1;

this.param2 = param2;

this.say = function () {

console.log(this.parma1, this.param2);

}

}

let f = new Foo('parma', 'param2');

console.log(f.constructor); // 指向当前的Foo函数方法

function foo() {

console.log('this is a function');

}

console.log(foo.constructor);  // ƒ Function() { [native code] }

2.prototype

2.1 当函数创建的时候，js就会自动创建一个protype

eg:

function Foo(param1, param2) {

this.param1 = param1;

this.param2 = param2;

this.say = function () {

console.log(this.parma1, this.param2);

}

}

console.log(Foo.prototype);  // Foo(param1, param2) 指向当前函数 原型

function foo() {

console.log('this is a function');

}

console.log(foo.constructor);  // foo() 指向当前函数

// 创建完函数的prototype 都会指向 functionName.prototype，

// 这个时候就可以往当前原型的基础之上添加属性和方法,也可以指向另一个对象来实现集成。

Foo.prototype.trim = function() {

console.log('the function on prototype');

}

3.__proto__

3.1 每个对象或者是函数都会存在 __proto__

// javascript 可以通过prototype和__proto__，在两个对象之间建立一个联系，使当前对象可以访问另一个对象的方法和属性。

// 这样的关联称之为原型链，用来实现集成和属性方法的共享。

3.2 call 和  constructor

// js 函数就会有这两个方法用来创建实例

eg:

function Foo(param1, param2) {

this.param1 = param1;

this.param2 = param2;

this.say = function () {

console.log(this.parma1, this.param2);

}

}

let f = new Foo('parma', 'param2');  // 通过constructor构造器来创建函数的实例

function foo() {

console.log('this is a function');

}

// foo 函数的执行用两种方式的写法，但是是等价的

3.2.1 常用的执行方式

foo(); // 执行当前函数

3.2.2 call 执行函数

foo.call(); // 执行当前函数

3.3 __proto__ 的指向问题

eg:

function Foo(param1, param2) {

this.param1 = param1;

this.param2 = param2;

this.say = function () {

console.log(this.parma1, this.param2);

}

}

let f = new Foo('parma', 'param2');

console.log(f.___proto__) // Foo(param1, param2)  Foo.prototype

console.log(Foo.___proto__) // Function.prototype

function foo() {

console.log('this is a function');

}

console.log(f.___proto__) // Function.prototype

4. 总结

4.1

let fo = new Foo('parma', 'param2');

fo.__proto__ == Foo.prototype;

fo.__proto__.__proto__ == Foo.prototype.__proto__ == Object.prototype;

fo.__proto__.__proto__.__proto__ == Foo.prototype.__proto__.__proto__ == Object.prototype.__proto__ == null;

Foo.__proto__ == Function.prototype;

Foo.__proto__.__proto__ == Function.prototype.__proto__;

Foo.__proto__.__proto__.__proto__ == Function.prototype.__proto__.__proto__ == Object.prototype.__proto__ == null;