JavaScript...原型与继续中的原型链...

原型

原型是什么

在JavaScript中 函数是一个包括属性和要领的Function范例的对象 而原型(Prototype)就是Function范例对象的一个属性
在函数定义时就包括了prototype属性 它的初始值是一个空对象 在JavaScript中并没有定义函数的原型范例 所以原型可所以任何范例
原型是用于保留对象的同享属性和要领的 原型的属性和要领并不会影响函数自身的属性和要领

// Function范例的属性 -> 一切函数都具有的属性
console.log(Function.prototype);
// 定义函数
function fn(){
    console.log('this is function');
}
// 原型的默许值是空对象
console.log(fn.prototype);
// 函数包括组织函数 -> 一切援用范例实在都是组织函数
console.log(Number.prototype);

console.log(Object.prototype);

var result = Object.getOwnPropertyDescriptor(Object.prototype, 'constructor');
console.log(result);

猎取原型

function fn(){
    console.log('this is function');
}
// 运用接见对象的属性语法构造
console.log(fn.prototype);
console.log(fn['prototype']);
// Object范例供应getPrototypeOf()要领
console.log(Object.getPrototypeOf(fn));

为原型新增属性或许要领

function fn(){
    console.log('this is function');
}
// 变量proto也是一个空对象
// var proto = fn.prototype;

// 新增属性或要领
// proto.name = '张三';
fn.prototype.name = '张三';
console.log(fn.prototype);
// defineProperty()
Object.defineProperty(fn.prototype, 'age', {
    value : 28,
    enumerable : true
});
console.log(fn.prototype);

组织函数的原型

// 定义组织函数
function Hero(){
    this.name = '张三';
    this.sayMe = function(){
        console.log('this is function');
    }
}
// 操纵组织函数Hero的原型
Hero.prototype.age = 28;
// 应用组织函数来建立对象
var hero = new Hero();
console.log(hero);
// 为组织函数的原型新增的属性 -> 组织函数建立的对象中照旧能够接见
console.log(hero.age);// 28
// 对象hero中不存在age属性
var result = Object.getOwnPropertyDescriptor(hero, 'age');
console.log(result);

原型属性

自有属性与原型属性

自有属性:经由过程对象的援用增加的属性 其他对象能够无此属性 纵然有 也是相互自力的属性
原型属性:从原型对象中继续来的属性 一旦原型对象中属性值转变 一切继续该原型的对象属性均转变

// 定义组织函数
function Hero(name){
    // 组织函数自身的属性 -> 自有属性
    this.name = name;
    this.sayMe = function(){
        console.log('this is function');
    }
}
// 经由过程组织函数Hero的prototype新增属性或要领
// 经由过程原型所定义的属性 -> 原型属性
Hero.prototype.age = 28;
/*
    经由过程组织函数Hero建立对象时
    * 不仅具有组织函数的自有属性
    * 还具有组织函数的原型属性
 */
var hero = new Hero('张三');

console.log(hero.name);// 张三
console.log(hero.age);// 18

var hero2 = new Hero('李四');
console.log(hero2.name);// 李四
console.log(hero2.age);// 28
// 为对象hero新增age属性
// hero.age = 80;
// console.log(hero.age);// 80
//
// console.log(hero);
//
// console.log(hero2.age);// 28

Hero.prototype.age = 80;

console.log(hero.age);
console.log(hero2.age);

重写属性

经由过程组织函数或对象的自有属性能够重写原型的属性

// 定义组织函数
function Hero(){
    this.name = '张三';
}
// 组织函数的原型
Hero.prototype.name = '李四';
// 组织函数建立对象
var hero = new Hero();
// 自有属性与原型属性同名时,默许接见的是自有属性 -> 自有属性的优先级别高于原型属性
console.log(hero.name);// 张三

// 删除对象的属性
delete hero.name;
// 从新接见对象的属性
console.log(hero.name);// 李四

检测原型属性

function Hero(){
//this.name = '张三';// 自有属性
}
 //Hero.prototype.name = '李四';

var hero = new Hero();
/*
    Object.hasOwnProperty(prop)要领
    * 作用 - 推断当前指定属性是不是为自有属性
    * 参数
      * prop - 示意指定属性称号
    * 返回值 - 布尔值
      * true - 示意存在指定的自有属性
      * false - 示意不存在指定的自有属性
 */
// console.log(hero.hasOwnProperty('name'));// true
/*
    运用in关键字检测对象的属性
    * 作用 - 推断对象中是不是存在指定属性(自有属性或原型属性)
    * 返回值 - 布尔值
      * true - 示意存在指定的属性
      * false - 示意不存在指定的属性
 */
console.log('name' in hero);

操纵原型的体式格局

// 定义组织函数
function Hero(){}
// 经由过程组织函数的原型新增属性或要领

// 1.应用对象.属性或要领的体式格局新增属性或要领
Hero.prototype.name = '张三';
Hero.prototype.sayMe = function(){
    console.log('this is function');
}
// 2.将原型从新赋值为一个新对象
Hero.prototype = {
    name : '张三',
    sayMe : function(){
        console.log('this is function');
    }
}

// 经由过程组织函数建立对象
var hero = new Hero();

console.log(hero.name);
hero.sayMe();

显式原型与隐式原型

// 定义组织函数
function Hero(){
    this.name = '张三';
}
// 经由过程组织函数的原型新增属性或要领
Hero.prototype.age = 28;
// 经由过程组织函数建立对象
var hero = new Hero();

console.log(hero.name);// 对象挪用自有属性
console.log(hero.age);// 对象挪用原型属性

/*
    一切对象实在也具有原型
    * 注重 - 对象的原型(__proto__)并非是函数的原型(prototype)
    * 辨别
      * 将函数的原型 -> 显式原型
      * 将对象的原型 -> 隐式原型
    * 对象的原型
      * 不能用于实在开辟事情,仅用于逻辑测试
 */
console.log(hero.prototype);// undefined 示意对象中不存在该属性
console.log(hero.__proto__);

isPrototypeOf()要领

每一个对象中都邑具有一个isPrototypeOf()要领 该要领用来推断一个对象是不是是另一个对象的原型

// 经由过程初始化器体式格局定义对象
var obj = {
    name : '张三'
}
//定义组织函数
function Hero(){}
//将对象obj赋值给组织函数Hero的原型
Hero.prototype = obj;
//经由过程组织函数建立对象
var hero = new Hero();
//推断指定对象是不是是另一个对象的原型
var result = obj.isPrototypeOf(hero);

console.log(result);

扩大内置对象

JavaScript中的内置对象有些也具有prototype属性 应用内置对象的prototype属性能够为内置对象扩大属性或要领
经由过程原型扩大内置对象的属性和要领异常天真 依据个性化请求制订Java Script言语的具体内容

Object.prototype.sayMe = function(){
    console.log('this is sayMe function');
}
// 经由过程Object组织函数建立对象
var obj = new Object();

obj.sayMe();


Array.prototype.inArray = function(color){
    // this - 示意当前的数组
    for(var i = 0, len = this.length; i < len; i++){
        if(this[i] === color){
            return true;
        }
    }
    return false;
}
var arr = ["red", "green", "blue"];

console.log(arr.inArray("red")); //true
console.log(arr.inArray("yellow")); //false

继续

原型链是什么

组织函数或组织用具有prototype属性 对象具有__proto__属性 这就是之前进修的原型
假如组织函数或对象A A的原型指向组织函数或对象B B的原型在指向组织函数或对象C 以此类推 终究的组织函数或对象的原型指向Object的原型 由此构成一条链状构造 被称之为原型链
根据上述的形貌 在B中定义的属性或要领 能够直接在A中运用并不需要定义 这就是继续 它许可每一个对象来接见其原型链上的任何属性或要领

// 原型链
function A(){
    this.a = 'a';
}
// 经由过程组织函数建立对象
var a = new A();

function B(){
    this.b = 'b';
}
// 将B的原型指向对象a
B.prototype = a;
// 经由过程组织函数建立对象
var b = new B();

console.log(b.b);// b
console.log(b.a);// a

function C(){
    this.c = 'c';
}
// 将C的原型指向对象b
C.prototype = b;
// 经由过程组织函数建立对象
var c = new C();

console.log(c.c);// c
console.log(c.b);// b
console.log(c.a);// a

只继续于原型

处于对效力的斟酌 只管地将属性和要领增加到原型上
1.不要为继续关联零丁建立新对象
2.只管削减运行时的要领搜刮

// 原型链
function A(){
    // 将自有属性改写为原型属性
    // this.a = 'a';
}
A.prototype.a = 'a';

function B(){
    // this.b = 'b';
}

// 将B的原型指向
B.prototype = A.prototype;

B.prototype.b = 'b';
/*B.prototype = {
    b : 'b'
}*/

function C(){
    this.c = 'c';
}
// 将C的原型指向
C.prototype = B.prototype;

var c = new C();
console.log(c.c);// c
console.log(c.b);
console.log(c.a);// a

原型链完成继续的题目

// 原型链
function A(){
    // 将自有属性改写为原型属性
    // this.a = 'a';
}
A.prototype.a = 'a';

function B(){
    // this.b = 'b';
}

// 将B的原型指向
B.prototype = A.prototype;

B.prototype.b = 'b';

function C(){
    // this.c = 'c';
}
// 将C的原型指向
C.prototype = B.prototype;
C.prototype.c = 'c';

var c = new C();
console.log(c.c);// c
console.log(c.b);// b
console.log(c.a);// a

var a = new A();

console.log(a.a);
console.log(a.b);
console.log(a.c);

var b = new B();

console.log(b.a);
console.log(b.b);
console.log(b.c);
    原文作者:栖梧
    原文地址: https://segmentfault.com/a/1190000016042683
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞