wns9778.com_威尼斯wns.9778官网

热门关键词: wns9778.com,威尼斯wns.9778官网
wns9778.com > 计算机教程 > JavaScript变量类型检测总结wns9778.com

原标题:JavaScript变量类型检测总结wns9778.com

浏览次数:69 时间:2019-05-10

JavaScript中的变量类型:

转载地址:http://javascript.ruanyifeng.com/oop/prototype.html#toc0

基本类型值:Undefined,Null,Boolean,Number和String.

写的挺不错的。

按值访问(可直接操作保存在变量中的变量值);

大部分面向对象的编程语言,都是以“类”(class)作为对象体系的语法基础。JavaScript 语言不是如此,它的面向对象编程基于“原型对象”。

复制规则:当复制基本类型值时:两个变量完全独立,不会互相影响。如下所示:

概述
构造函数的缺点
JavaScript通过构造函数生成新对象,因此构造函数可以视为对象的模板。实例对象的属性和方法,可以定义在构造函数内部。

var a = b = 1;
var c = a;
b = 2;
c = 3;
console.log(a); //1
console.log(b); //2
console.log(c); //3
function Cat (name, color) {
  this.name = name;
  this.color = color;
}

var cat1 = new Cat('大毛', '白色');

cat1.name // '大毛'
cat1.color // '白色'

引用类型值:包含多个值的对象,是一种将数据(属性)与功能(方法)组织在一起的数据结构。

上面代码的Cat函数是一个构造函数,函数内部定义了name属性和color属性,所有实例对象都会生成这两个属性。但是,这样做是对系统资源的浪费,因为同一个构造函数的对象实例之间,无法共享属性。

按引用访问(不能直接操作对象的内存空间,操作的实际上是对象的引用);

function Cat(name, color) {
  this.name = name;
  this.color = color;
  this.meow = function () {
    console.log('mew, mew, mew...');
  };
}

var cat1 = new Cat('大毛', '白色');
var cat2 = new Cat('二毛', '黑色');

cat1.meow === cat2.meow
// false

复制规则:当复制引用类型的值时,复制的其实是一个指针,该指针指向堆中的同一个对象;所以原变量和复制的变量实际上将引用同一个对象,即改变其中一个,另一个也会跟着变化。如下所示:

上面代码中,cat1和cat2是同一个构造函数的实例。但是,它们的meow方法是不一样的,就是说每新建一个实例,就会新建一个meow方法。这既没有必要,又浪费系统资源,因为所有meow方法都是同样的行为,完全应该共享。

var cat = new Object();
var dog = cat;
dog.name = "tom";
console.log(cat.name); //tom

prototype属性的作用
JavaScript的每个对象都继承另一个对象,后者称为“原型”(prototype)对象。只有null除外,它没有自己的原型对象。

变量类型检测:

原型对象上的所有属性和方法,都能被派生对象共享。这就是JavaScript继承机制的基本设计。

wns9778.com,方法一:type of

通过构造函数生成实例对象时,会自动为实例对象分配原型对象。每一个构造函数都有一个prototype属性,这个属性就是实例对象的原型对象。

有两种写法:typeof xxx ,typeof(xxx);

function Animal (name) {
  this.name = name;
}

Animal.prototype.color = 'white';

var cat1 = new Animal('大毛');
var cat2 = new Animal('二毛');

cat1.color // 'white'
cat2.color // 'white'
typeof 2 //   number
typeof null //   object
typeof undefined //  undefined
typeof '123' //    string
typeof true //     boolean

typeof {} //   object
typeof [] //   object
typeof (function(){}) //  function
typeof new Object() //object
typeof Object //function
typeof /[hbc]at/gi //object

上面代码中,构造函数Animal的prototype对象,就是实例对象cat1和cat2的原型对象。在原型对象上添加一个color属性。结果,实例对象都能读取该属性。

可以看到,用type of 可以很好的区分出number,undefined,string,boolean这四种基本数据类型,但null会被判定为object.此外,该方法还能检测出函数和对象,但是并不能知道某个对象具体是什么类型的实例。

原型对象的属性不是实例对象自身的属性。只要修改原型对象,变动就立刻会体现在所有实例对象上。

 

Animal.prototype.color = 'yellow';

cat1.color // "yellow"
cat2.color // "yellow"

方法二:constructor

上面代码中,原型对象的color属性的值变为yellow,两个实例对象的color属性立刻跟着变了。这是因为实例对象其实没有color属性,都是读取原型对象的color属性。也就是说,当实例对象本身没有某个属性或方法的时候,它会到构造函数的prototype属性指向的对象,去寻找该属性或方法。这就是原型对象的特殊之处。

每一个对象实例都可以通过 constructor 属性访问它的构造函数:

如果实例对象自身就有某个属性或方法,它就不会再去原型对象寻找这个属性或方法。

var cat = new Cat();
console.log(cat.constructor === Cat) //  true
console.log(cat.constructor === Cat.prototype.constructor) //  true
cat1.color = 'black';

cat2.color // 'yellow'
Animal.prototype.color // "yellow";

其实这里的constructor属性并不是实例本身的,而是实例在其原型链上找到的属性,即cat.__proto__对象的属性,而由原型规则(我的另一篇博客写了原型规则)我们知道,cat.__proto__.constructor === Cat,所以继承到该属性后,cat.constructor === Cat 。

上面代码中,实例对象cat1的color属性改为black,就使得它不再去原型对象读取color属性,后者的值依然为yellow。

参考文献:https://blog.csdn.net/zengyonglan/article/details/53465505

总结一下,原型对象的作用,就是定义所有实例对象共享的属性和方法。这也是它被称为原型对象的含义,而实例对象可以视作从原型对象衍生出来的子对象。

 

Animal.prototype.walk = function () {
  console.log(this.name   ' is walking');
};

方法三:instanceof

上面代码中,Animal.prototype对象上面定义了一个walk方法,这个方法将可以在所有Animal实例对象上面调用。

一般用法:如果被检测变量是给定类型的实例,则返回true。

由于JavaScript的所有对象都有构造函数,而所有构造函数都有prototype属性(其实是所有函数都有prototype属性),所以所有对象都有自己的原型对象。

var strObj = new String(); 
strObj instanceof String //true
strObj  instanceof Object //true

原型链
对象的属性和方法,有可能是定义在自身,也有可能是定义在它的原型对象。由于原型本身也是对象,又有自己的原型,所以形成了一条原型链(prototype chain)。比如,a对象是b对象的原型,b对象是c对象的原型,以此类推。

如图所示,strObj是String类型的实例,故返回true,另外,由于所有对象都是Object类型的实例,故第三行也返回true。

如果一层层地上溯,所有对象的原型最终都可以上溯到Object.prototype,即Object构造函数的prototype属性指向的那个对象。那么,Object.prototype对象有没有它的原型呢?回答可以是有的,就是没有任何属性和方法的null对象,而null对象没有自己的原型。

但其实该方法并没有这么简单,首先说明一点:JS中实例对象的隐式原型.__proto__

其构造函数的显式原型.prototype;该方法就是检测左侧的__proto__原型链上,是否存在右侧的prototype原型;即L.__proto__.__proto__ ..... === R.prototype ?如果存在返回true 否则返回false。所以所有的实例 instanseof Object 都返回true ,比如上述代码第三行,然而实例strObj并不是Object直接new出来的实例。那么怎么判断出该实例是否是某构造函数直接new出来的实例呢?可以结合上述constructor属性:

strObj.__proto__.constructor === String; //true

strObj.__proto__.constructor === Object; //false

便可以准确的判断出strObj的直接和构造函数是String而非Object了。

 

关于instanceof和原型链的原理下面两篇文章说的比较清楚:

https://www.cnblogs.com/libin-1/p/5820550.html

https://www.ibm.com/developerworks/cn/web/1306_jiangjj_jsinstanceof/

这种方法较为稳妥,却不能具体的检测出某个变量的具体类型。那有没有一种方法可以准确的检测出某个变量的类型呢?方法4便是:

 

方法四:Object.prototype.toString.call()

1.判断基本类型:

Object.prototype.toString.call(null);//”[object Null]”
Object.prototype.toString.call(undefined);//”[object Undefined]”
Object.prototype.toString.call("abdaw");//”[object String]”
Object.prototype.toString.call(1);//”[object Number]”
Object.prototype.toString.call(true);//”[object Boolean]”

2.判断原生引用类型:

//函数类型:
var foo = Function()
console.log(Object.prototype.toString.call(foo))//”[object Function]”
//日期类型:
var date = new Date();
console.log(Object.prototype.toString.call(date))//”[object Date]”
//数组类型:
var arr = [1,2,3];
console.log(Object.prototype.toString.call(arr))//”[object Array]”
//正则表达式:
var reg = /[hbc]at/gi;
console.log(Object.prototype.toString.call(reg))//”[object RegExp]”
//自定义类型:
function Cat(name) {
this.name = name;
}
var cat = new Cat("Tom");
console.log(Object.prototype.toString.call(cat)) //”[object Object]”

然而这种方法不能准确判断cat是Cat类的实例,这时可以结合instanceof 操作符来进行判断:person instanceof Person //true。

文章仅代表个人理解,如有错误或补充,欢迎指出。

Object.getPrototypeOf(Object.prototype)
// null

上面代码表示,Object.prototype对象的原型是null,由于null没有任何属性,所以原型链到此为止。

“原型链”的作用是,读取对象的某个属性时,JavaScript引擎先寻找对象本身的属性,如果找不到,就到它的原型去找,如果还是找不到,就到原型的原型去找。如果直到最顶层的Object.prototype还是找不到,则返回undefined。

如果对象自身和它的原型,都定义了一个同名属性,那么优先读取对象自身的属性,这叫做“覆盖”(overriding)。

需要注意的是,一级级向上,在原型链寻找某个属性,对性能是有影响的。所寻找的属性在越上层的原型对象,对性能的影响越大。如果寻找某个不存在的属性,将会遍历整个原型链。

举例来说,如果让某个函数的prototype属性指向一个数组,就意味着该函数可以当作数组的构造函数,因为它生成的实例对象都可以通过prototype属性调用数组方法。

var MyArray = function () {};

MyArray.prototype = new Array();
MyArray.prototype.constructor = MyArray;

var mine = new MyArray();
mine.push(1, 2, 3);

mine.length // 3
mine instanceof Array // true

上面代码中,mine是构造函数MyArray的实例对象,由于MyArray的prototype属性指向一个数组实例,使得mine可以调用数组方法(这些方法定义在数组实例的prototype对象上面)。至于最后那行instanceof表达式,我们知道instanceof运算符用来比较一个对象是否为某个构造函数的实例,最后一行就表示mine为Array的实例。

下面的代码可以找出,某个属性到底是原型链上哪个对象自身的属性。

function getDefiningObject(obj, propKey) {
  while (obj && !{}.hasOwnProperty.call(obj, propKey)) {
    obj = Object.getPrototypeOf(obj);
  }
  return obj;
}
constructor属性
prototype对象有一个constructor属性,默认指向prototype对象所在的构造函数。

function P() {}

P.prototype.constructor === P
// true
由于constructor属性定义在prototype对象上面,意味着可以被所有实例对象继承。

function P() {}
var p = new P();

p.constructor
// function P() {}

p.constructor === P.prototype.constructor
// true

p.hasOwnProperty('constructor')
// false

上面代码中,p是构造函数P的实例对象,但是p自身没有contructor属性,该属性其实是读取原型链上面的P.prototype.constructor属性。

constructor属性的作用,是分辨原型对象到底属于哪个构造函数。

function F() {};
var f = new F();

f.constructor === F // true
f.constructor === RegExp // false

上面代码表示,使用constructor属性,确定实例对象f的构造函数是F,而不是RegExp。

有了constructor属性,就可以从实例新建另一个实例。

function Constr() {}
var x = new Constr();

var y = new x.constructor();
y instanceof Constr // true

上面代码中,x是构造函数Constr的实例,可以从x.constructor间接调用构造函数。

这使得在实例方法中,调用自身的构造函数成为可能。

Constr.prototype.createCopy = function () {
  return new this.constructor();
};

这也提供了继承模式的一种实现。

function Super() {}

function Sub() {
  Sub.superclass.constructor.call(this);
}

Sub.superclass = new Super();

上面代码中,Super和Sub都是构造函数,在Sub内部的this上调用Super,就会形成Sub继承Super的效果。

由于constructor属性是一种原型对象与构造函数的关联关系,所以修改原型对象的时候,务必要小心。

function A() {}
var a = new A();
a instanceof A // true

function B() {}
A.prototype = B.prototype;
a instanceof A // false

上面代码中,a是A的实例。修改了A.prototype以后,constructor属性的指向就变了,导致instanceof运算符失真。

所以,修改原型对象时,一般要同时校正constructor属性的指向。

// 避免这种写法

C.prototype = {
  method1: function (...) { ... },
  // ...
};

// 较好的写法

C.prototype = {
  constructor: C,
  method1: function (...) { ... },
  // ...
};

// 好的写法

C.prototype.method1 = function (...) { ... };

上面代码中,避免完全覆盖掉原来的prototype属性,要么将constructor属性重新指向原来的构造函数,要么只在原型对象上添加方法,这样可以保证instanceof运算符不会失真。

此外,通过name属性,可以从实例得到构造函数的名称。

本文由wns9778.com发布于计算机教程,转载请注明出处:JavaScript变量类型检测总结wns9778.com

关键词: wns9778.com

上一篇:Python中getoptwns9778.com()函数的使用

下一篇:没有了