深入分析JavaScript中instanceof对于区别的布局器恐怕都回来true

2019-12-04 06:07栏目:竞技宝竞猜
TAG:

在JavaScript中,可以使用类来实现面向对象编程(Object Oriented Programming)。不过,JavaScript中的类与Java中的有所不同,其相应的定义和使用也不一样。

解析JavaScript中instanceof对于不同的构造器或许都返回true

 这篇文章主要是对JavaScript中instanceof对于不同的构造器或许都返回true进行了详细的解析,需要的朋友可以过来参考下,希望对大家有所帮助

我们知道 instanceof 运算符用来检查对象是否为某构造器的实例。下面列举它返回true的各种情景。

 

1、对象obj是通过new Constructor创建的,那么 obj instanceof Constructor 为true

 

 

代码如下:

function Person(n, a) { 

    this.name = n; 

    this.age = a; 

var p = new Person('John Backus', 82); 

console.log(p instanceof Person); // true 

 

2、如果存在继承关系,那么 子类实例 instanceof 父类 也会返回true

代码如下:

function A(){} 

function B(){} 

B.prototype = new A(); // B继承于A 

 

var b = new B(); 

console.log(b instanceof A); // true 

 

3、由于Object是根类,所有其它自定义类都继承于它,因此 任意构造器的实例 instanceof Object 都返回true

复制代码 代码如下:

function A() {} 

var a = new A(); 

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

 

var str = new String('hello'); 

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

 

var num = new Number(1); 

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

 

甚至包括构造器自身

代码如下:

function A() {} 

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

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

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

 

4、所有构造器 instanceof Function 返回true

代码如下:

function A() {} 

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

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

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

 

以上四点总结为一句话:如果某实例是通过某类或其子类的创建的,那么instanceof就返回true。或者说某构造函数的原型 存在与对象obj的内部原型链上,那么返回true。即instanceof的结果与构造器自身并无直接关系。这在许多语言中都是通用的。

 

Java中定义了一个类Person,实例p对于Person和Object都返回true

 

 

代码如下:

class Person { 

    public String name; 

    public int age; 

    Person (String n, int a) { 

        this.name = name; 

        this.age = a; 

    } 

    public static void main(String[] args) { 

        Person p = new Person("John Backus", 82); 

        System.out.println(p instanceof Person); // true 

        System.out.println(p instanceof Object); // true 

    } 

 

Java中如果存在继承关系,那么 子类实例 instanceof 父类 也返回true

代码如下:

// 父类 

class Person { 

    public String name; 

    public int age; 

    Person (String n, int a) { 

        name = name; 

        age = a; 

    } 

// 子类 

public class Man extends Person{ 

    public String university; 

    Man(String n, int a, String s) { 

        super(n, a); 

        university = s; 

    } 

    public static void main(String[] args) { 

        Man mm = new Man("John Resig", 29, "PKU"); 

        System.out.println(mm instanceof Man); // true 

        System.out.println(mm instanceof Person); // 也是true 

    } 

 

知道了这些,JS中以下的表现就不奇怪了

复制代码 代码如下:

// 定义两个构造器 

function A(){} 

function B(){} 

A.prototype = B.prototype = {a: 1}; 

 

// 分别创建两个不同构造器的实例 

var a = new A(); 

var b = new B(); 

console.log(a instanceof B); // true 

console.log(b instanceof A); // true 

 

我们看到a, b分别是用A和B创建的,但a instanceof B和 b instanceof A都是true。即a虽然不是用构造器B创建的,但仍然返回true。因为B.prototype存在于a的内部原型链上。

 

由于JS的动态语言特性,可以在运行时修改原型,因此下面返回false也不足为奇了。因为A.prototype已经不在a的内部原型链中,链条被打断了。

 

 

代码如下:

function A(){} 

var a = new A(); 

A.prototype = {}; // 动态修改原型,注意必须在创建a后 

console.log(a instanceof A); // false 

 

注意这么写也打破了上面总结的第一条:对象obj是通过new Constructor创建的,那么obj instanceof Constructor 为true

 

实际在ECMAScript标准中(以5.1为准),instanceof 内部实现会调用构造器的内部方法[[HasInstance]],描述如下

 

 

 

假如F是一个函数对象,当F(V)执行时,以下步骤将发生:

 

1、如果instanceof左运算元V不是对象类型,直接返回false

 

 

代码如下:

var a, b = 1, c = true, d = 'hello'; 

console.log(a instanceof Object); // false 这里a值为undefined 

console.log(b instanceof Object); // false 

console.log(c instanceof Object); // false 

console.log(d instanceof Object); // false 

 

2/3、取构造器F的prototype属性,如果不是对象类型,须抛出TypeError异常,

代码如下:

function A(){} 

A.prototype = 1; // A的prototype设为非对象类型 

var a = new A(); 

console.log(a instanceof A); 

 

各浏览器抛出的异常提示不同,

 

Firefox18:

 

Chrome24:

 

Safari6:

 

Opera12:

 

IE10:

 

 

4、不断的执行以下逻辑:将V设为内部原型的V,如果V是null则返回false,如果V和O都指向同一个对象,则返回true。

这篇文章主要是对JavaScript中instanceof对于不同的构造器或许都返回true进行了详细的解...

我们知道 instanceof 运算符用来检查对象是否为某构造器的实例。下面列举它返回true的各种情景。

JavaScript中类的定义

1、对象obj是通过new Constructor创建的,那么 obj instanceof Constructor 为true

在JavaScript中,所有从同一个原型对象处衍生出来的对象组成了一个类;也就是说,JavaScript中的类是一个对象集合的概念,如果两个对象它们的prototype相同,那么它们就属于同一个类;JavaScript中的类甚至都不需要类名。以下面的代码为例:

复制代码 代码如下:

复制代码 代码如下:var p = {x:42};var a = Object.create;var b = Object.create;console.log;//falseconsole.log(Object.getPrototypeOf === Object.getPrototypeOf;//true

function Person(n, a) {
    this.name = n;
    this.age = a;
}
var p = new Person('John Backus', 82);
console.log(p instanceof Person); // true

在上述例子中,对象a和b拥有相同的原型对象 p,因此a和b属于同一个类,它们从原型对象p处继承了值为42的属性x。

2、如果存在继承关系,那么 子类实例 instanceof 父类 也会返回true

从这个例子中可以看到,原型对象的作用就相当于模板,可以由之衍生/创建出多个对象,其地位与Java语言中的类代码相同,是JavaScript中类定义的核心。以下这个例子中的原型对象就呈现出更像类代码的样子:

复制代码 代码如下:

复制代码 代码如下:var p = {INCREMENT_BY : 1,increment : function{return x + this.INCREMENT_BY;}}var a = Object.create;var b = Object.create;console.log;//8console.log;//10

function A(){}
function B(){}
B.prototype = new A(); // B继承于A

上述例子中,原型对象p定义了一个值为1的property 和一个名为increment的函数;对象a和b从p这个模板处获取了INCREMENT_BY和increment函数。当调用对象a或b的increment函数时,JavaScript会试图获取a或b的INCREMENT_BY值;由于INCREMENT_BY是从p中获取的,因此其值都是1 — 从模板中获取的,值都相同的变量,类似于Java中的静态类变量,因此上面的例子中对INCREMENT_BY变量命名时使用了全大写字符。

var b = new B();
console.log(b instanceof A); // true

在上面的例子中,所有从模板p处创建出来的对象,其属性和行为都是一模一样的。但实际上对于同一个类的不同对象,它们除了拥有类所定义的属性/行为以外,往往具有一些自身所特有的属性与行为。因此,如果需要将prototype这个模板当作类来使用的话,就必须对每一个从中衍生出来的对象进行一定的定制:

3、由于Object是根类,所有其它自定义类都继承于它,因此 任意构造器的实例 instanceof Object 都返回true

复制代码 代码如下:var p = {INCREMENT_BY : 1,increment : function{return x + this.INCREMENT_BY + this.custom_increment_by;}}var a = Object.create;var b = Object.create;a.custom_increment_by = 0;b.custom_increment_by = 1;console.log;//8console.log;//11

复制代码 代码如下:

在这个例子中,从模板p处创建出来的对象a和b拥有一个彼此间值不一定相等的变量custom_increment_by,而它们的increment()函数这个行为的最终结果则与custom_increment_by的值相关。一般来说,对新建对象进行定制化的工作往往放在统一的函数中进行:

function A() {}
var a = new A();
console.log(a instanceof Object); // true

复制代码 代码如下:var p = {INCREMENT_BY : 1,increment : function{return x + this.INCREMENT_BY + this.custom_increment_by;}}function getIncrementalClassObject(customIncrementByValue){var incrementalObj = Object.create;incrementalObj.custom_increment_by = customIncrementByValue;return incrementalObj;}var a = getIncrementalClassObject;var b = getIncrementalClassObject;console.log;//8console.log;//11

var str = new String('hello');
console.log(str instanceof Object); // true

如此,便通过原型对象p和getIncrementalClassObject()函数完成了一个类的定义:可以通过调用getIncrementalClassObject()函数来获取原型对象都是p的对象,而在调用getIncrementalClassObject()函数过程中可以对这些新建对象进行一定的定制化。值得注意的是,此时这个已经定义了的类还没有类名,为了方便描述,姑且称之为Incremental。

var num = new Number(1);
console.log(num instanceof Object); // true

回顾getIncrementalClassObject()函数中所做的工作,可以看到从Incremental这个类中创建新的对象所经历的过程如下:

甚至包括构造器自身

1.创建一个空对象,并将其原型对象定义为p。2.根据不同的参数值,对这个新建的空对象进行定制。3.返回已经定制完成的新对象。

复制代码 代码如下:

在JavaScript中,可以通过使用Constructor来快速地完成类的定义以及新对象的创建。

function A() {}
console.log(A instanceof Object); // true
console.log(String instanceof Object); // true
console.log(Number instanceof Object); // true

JavaScript中的Constructor

4、所有构造器 instanceof Function 返回true

从上述Incremental类这个例子中可以看到,定义新的类需要两部分代码:创建原型对象作为模板、创建自定义函数对新对象进行初始化;而从类中创建新的对象则经历了三个过程:指定新对象的原型对象、定制/初始化新对象、返回这个新对象。在JavaScript中,这一切都可以通过Constructor来完成。

复制代码 代码如下:

JavaScript中的Constructor是一个函数,承担对新对象进行初始化的职责;而这个Constructor函数的prototype则作为模板用于创建新对象。仍以上述Incremental类为例,用Constructor来重写代码后是这样的:

function A() {}
console.log(A instanceof Function); // true
console.log(String instanceof Function); // true
console.log(Number instanceof Function); // true

版权声明:本文由龙竞技官网发布于竞技宝竞猜,转载请注明出处:深入分析JavaScript中instanceof对于区别的布局器恐怕都回来true