美文网首页
JavaScript高级程序设计

JavaScript高级程序设计

作者: 吃不胖的茶叶蛋 | 来源:发表于2018-07-06 11:03 被阅读7次

    typeof

    ECMAScript有5种基本类型数据:

    • undefined
    • null
    • boolean
    • number
    • string

    另外还有一种复杂的数据类型

    • object

    typeof就是用来检测变量的数据类型的,typeof可能会返回以下值:

    • undefined
    • boolean
    • string
    • number
    • object
    • function

    instanceof

    typeof操作符在检测引用类型的值时,总是会返回object,所以用处不大。

    instanceof用来检测对象类型的,返回值是 true | false。
    例如:

    person instanceof Object
    colors instanceof Array
    

    函数

    即使定义的时候只接收两个参数,但是调用时未必一定要传两个参数

    原因: 参数的内部是用一个数组(arguments)来表示的。

    没有重载:因为没有函数签名

    数组方法

    • isArray()
    • toString() valueof() join()
    • push() pop()
    • shift() unshift()
    • sort() reverse()
    • 操作方法: slice() splice()
    • indexOf()
    • 迭代方法:every() filter() forEach() map() some()

    比较常用的几个方法:

    join()
    push()
    slice():基于当前数组中的一个或多个创建一个新数组
    indexOf()
    filter(function(){})
    forEach(function(){})
    map(function(){... return ...;} :返回一个新数组

    面向对象

    数据属性

    [[configurable]] : 能否通过删除属性从而重新定义属性。默认为true
    [[enumerable]] : 能否通过for-in循环返回属性。默认为true
    [[writable]] :能否修改属性值。默认为true
    [[value]] : 这个属性的值。默认为undefined

    举例:

    var person={
        name:"Tangwenxing"
    }
    

    上面person对象的name属性值被设置为Tangwenxing,也就是说它的[[value]]值被设置位Tangwenxing.

    Object.defineProperty()用来修改属性的默认特性(configurable,enumerable,writable,value),它有三个参数:

    • 属性所在的对象
    • 属性的名字
    • 一个描述符对象

    使用方法参见如下代码:

    var person={};
    Object.defineProperty(person,"name",{
        writable:false,
        value:"Tangwenxing",
        configurable:false
    })
    

    现在的name属性不可以被删除也不可以重新赋值了。

    访问属性

    主要是设置getter setter方法,因为不太重要,所以不提了。

    Object.defineProperties用法

    var person={}
    Object.defineProperties(person,{
        name:{
            value:"Tangwenxing",
            writable:false
        },
        age:{
            value:25,
            writable:true
        }
    })
    

    Object.getOwnPropertyDescriptor用法

    var descriptor = Object.getOwnPropertyDescriptor(person,"name");
    alert(descriptor.writable);
    

    原型模式

    每个函数都有一个prototype属性,这个属性是一个指针,指向一个对象。(这句话很重要,关键词是:函数,prototype是一个指针)
    prototype指向原型对象。
    所有原型对象都会自动获得一个construnctor属性(这句话也很重要)

    function Person(){}
    
    Person.prototype.name="twx";
    Person.prototype.age=29;
    Person.prototype.sayName=function(){
        alert(this.name);
    };
    
    var person1=new Person();
    var person2=new Person();
    

    Person函数有一个prototype属性,prototype指向一个(匿名)原型对象。

    实例person1、person2指向Person.prototype.

    在实例中创建原型中的同名属性,会覆盖原型中的那个属性。

    接上面的程序
    ...
    ...
    alert(person1.name); //twx
    
    person1.name = "fgh";
    alert(person1.name); //fgh ——-来自实例
    
    delete person1.name;
    alert(person1.name); //twx --来自原型
    

    hasOwnProperty()

    检测一个属性是存在实例中还是原型中

    接上面的程序
    ...
    ...
    person1.hasOwnProperty("name"); //false
    
    person1.name = "fgh";
    person1.hasOwnProperty("name"); //true
    
    delete person1.name;
    person1.hasOwnProperty("name"); //false
    

    Object.keys()

    获取对象上所有可枚举的实例属性

    var per1Keys = Object.keys(person1);
    alert(per1Keys); //name,age,sayName
    

    更简单的原型

    function Person(){}
    
    Person.prototype = {
        name:"twx",
        age:25,
        job:"IT",
        sayName:function(){
            alert(this.name);
        }
    }
    

    前面提到了,原型对象会自动获取一个constructor属性。但是在这里,我们完全重写了原型对象,因此constructor属性也不在是默认的(默认指向对象的构造函数)。

    因此可以这样写:

    function Person(){}
    
    Person.prototype = {
        constructor:Person, //让它重新指向构造函数
        name:"twx",
        age:25,
        job:"IT",
        sayName:function(){
            alert(this.name);
        }
    }
    

    原生对象(String Array等)的原型

    定义新方法:

    String.prototype.startsWith=function(text){
        return this.indexOf(text) = 0;
    }
    
    var message = "Hello World!";
    msg.startWith("Hello")   //true
    

    组合使用构造模式和原生模式

    function Person(name,age,job){
        this.name = name;
        this.age = age;
        this.job = job;
        this.friends = ['shely','Bob'];
    }
    
    Person.prototype = {
        constructor:Person,
        sayName:function(){
            alert(this.name);
        }
    }
    
    var person1 = new Person("twx",25,"IT");
    var person2 = new Person("hyc",27,"SALE");
    
    person1.friends.push("JLK");
    alert(person1.friends); //'shely','Bob','JLK'
    alert(person2.friends); //'shely','Bob'
    
    alert(person1.sayName === person2.sayName);  //true
    

    相关文章

      网友评论

          本文标题:JavaScript高级程序设计

          本文链接:https://www.haomeiwen.com/subject/vxyvuftx.html