美文网首页JavaScript
JavaScript - 函数 - 原型链

JavaScript - 函数 - 原型链

作者: 西巴撸 | 来源:发表于2017-02-27 23:54 被阅读15次

上一小节讲到了基本包装类型,本小节继续补充面向对象的内容.有点多,有点杂.好像我每次都在强调耐心这个词,确实,没有耐心是学不好技术的,如果讲的不够详细,大家又是似懂非懂的状态,这样与你与我都不好 !
所以我会很耐心的去分享,希望读者也有耐心去学习!

原型链 --- 绘图展示

  • 示例代码 :
<script>
    function Animal(){

    }
    function Dog(){

    }
    //设置原型链(原型)继承
    var a1 = new Animal();
    Dog.prototype = a1;

    var dog1 = new Dog();
    console.log(Object.prototype.constructor);

    var o = {};
    console.log(o.constructor == Object.prototype.constructor);
    console.log(Object.prototype.__proto__ == Object.prototype);
</script>
  • 图解 -- 更形象的展示原型链
**原型链 **

Object对象的补充点

  • 创建基本包装类型的对象
  • js中所有的对象都基于object,都继承自object
  • 示例代码 :
<script>
    var str1 = new String("demo01");
    var str2 = new String("demo01");
    var str3 = str1;
    var str4 = "demo01";

    //判断是否相等
    console.log(str1 == str2);    //false(!!!!)
    console.log(str1 == str4);    //true(内部会隐式转换)

    console.log(str1 === str2);   //false
    console.log(str1 === str3);   //true
    console.log(str1 === str4);   //false

    var num1 = new Number(10);
    var num2 = 10;
    var num3 = new Number(10);

    console.log(num1 == num2);      //true
    console.log(num1 == num3);      //false
</script>

Object.prototype详解

  • constructor:指向该对象的构造函数
  • hasOwnProperty:检测对象中是否存在某个实例属性
  • isPrototypeOf:判断某个对象是否是指定对象的原型对象(会判断整条原型链)
  • propertyIsEnumerable:判断该属性是否是可枚举
    如果是可以枚举的,那么在使用for..in循环的时候可以打印出来
  • toString 返回一个对当前对象的字符串描述信息,并非一定是该对象的字符串形式

1.object类型的对象 返回的什么 [obejct Object]
2.其他对象类型如函数 | 数组 ,返回对应的字符串形式
3.Number类型 可以传递参数(进制) 不传递参数:默认是十进制

  • toLocaleString 大部分情况下的等价于toString方法,特殊情况下会做本地化处理
  • valueOf 返回对应的值

1.基本包装类型(String Number Boolean),返回对应的基本类型的值
2.object类型的,返回this(该对象本身)
3.date(日期类),返回时间戳

  • 示例代码1 :
<script>
    function Person(){}
    var obj = {name:"name"};
    Person.prototype = obj;  //替换原型对象
    Person.constructor = Person;

    var p1 = new Person();

    console.log(obj.isPrototypeOf(p1));  //是原型对象
    console.log(Object.prototype.isPrototypeOf(p1));
    // true   整条原型链上面的原型对象都会进行判断
</script>
  • 示例代码2 :
<script>
    var obj = {name:"张三",age:23};
    //console.log(Object.getOwnPropertyDescriptor(obj, "name"));
    //设置属性
    Object.defineProperty(obj,"age",{
        enumerable:false,
    });

    for(var k in obj)
    {
        console.log(k, obj[k]);
    }
</script>
  • 示例代码3 :
<script>
    var o = {name:"dingding"};
    console.log(o.toString());    //[obejct Object]
    var arr = ["demo01","demo02","demo03"];
    console.log(arr.toString());  //demo01,demo02,demo03
    function demoTest(){};
    // console.log(demoTest.toString());  //function demoTest(){}

    var num = new Number(10);
    console.log(num.toString());  //20
    console.log(num.toString(2));  //二进制 -- 1010 --- > 1 * 2*2*2 + 0 *2*2 + 1*2 + 0*1 = 8 + 0 + 2 + 0 = 10
    console.log(num.toString(3));  //三进制 -- 101  ---> 1*3*3 + 0 * 3 + 1 *1 = 9 + 0 + 1 = 10
    console.log(num.toString(7));   //七进制 -- 13  ---> 1 * 7 + 3*1 = 10

    var str = new String("tese");
    console.log(str.valueOf());  //tese
    var o = {name:"jiji"};
    console.log(o.valueOf());
    var date = new Date();   //当前的时间
    console.log(date.valueOf()); //1488163624297 时间戳,是一个绝对的值
</script>

Object的静态成员和实例成员

实例成员

  • 成员 : 属性和方法
  • 说明 : 实力对象上面添加的属性和方法

静态成员

  • 构造函数 : 本身也是对象,所以构造函数自己也可以拥有属性和方法,这些属性和方法就是静态成员

  • Object.apply --> 借用其它对象的函数

  • Object.arguments -->函数内部的一个隐藏参数,主要用来接收实参。

  • Object.assign --> 拷贝对象的属性的

  • Object.bind --> 绑定处理(call和apply很像)

  • Object.call --> 借用其它对象的函数

  • Object.caller
    某个函数的调用函数,返回的是一个函数
    如果是在全局作用域中调用该方法,那么打印出来的是:null而不是window

  • Object.constructor --> 构造器属性,指向该对象的构造函数

  • Object.create --> 创建对象,并且设置原型对象

  • Object.getPrototypeOf --> 获得某个对象的原型对象

  • Object.getOwnPropertyDescriptor
    获得对象中某个实例属性的描述信息(是否可以配置,枚举,值,是否可以重写)

    具体的描述信息如下:

1.configurable:true 是否是可以配置的(能不能删除属性或者是修改这个配置本身)
2.enumerable:true 是否是可以枚举的(在for..in循环中是否能够遍历出来|keys())
3.value:"zhangsan" 属性对应的值
4.writable:true 是否是可重写的

  • Object.defineProperty 用来设置属性的描述信息(修改已有的属性|新增属性)
    1.修改已有的属性,默认情况下这三个值是true
    2.新增加属性 默认情况下,这三个属性的值都是false
  • 示例代码 :
<script>
    var obj = {};
    //Object.defineProperty来新增属性并且设置属性的描述对象
    Object.defineProperty(obj,"age",{
        value:"100"
    });
    console.log(Object.getOwnPropertyDescriptor(obj, "age"));
</script>
  • Object.getOwnPropertyNames
    1.不包含原型属性
    2.获得所有的实例属性(名称),返回值是一个数组
  • 示例代码 :
<script>
    var obj = {name:"zhangsan",age:78};
    console.log(Object.getOwnPropertyNames(obj));
    console.log(Object.getPrototypeOf(obj) == Object.prototype);
</script>
``

- **Object.keys --> 获得对象的key 不包含原型属性**
- **示例代码 :**

```javascript  
<script>
    function Person(){
        this.name = "momo"
    };
    Person.prototype.say = "say";
    var p1 = new Person();
    console.log(Object.keys(p1));
    console.log(Object.getOwnPropertyNames(p1));
</script>
  • Object.preventExtensions || Object.isExtensible --> 禁止对象扩展,默认情况下对象可以动态的增加属性,如果设置了禁止扩展,那么将无法增加属性
  • 示例代码 :
<script>
    var o = {};
    o.name = "names";
    console.log(o);
    Object.preventExtensions(o);
    o.age = 30;
    console.log(o);
</script>
  • Object.seal 密封对象 --> 禁止删除对象的属性,禁止修改对象的配置信息configurable,禁止扩展
  • Object.freeze 冻结对象 --> 不能删除属性,不能增加属性,也不能修改属性
  • 示例代码 :
<script>
    var obj = {des:"des"};
    Object.freeze(obj);
    obj.name = "momo";
    obj.age = 20;
    console.log(obj);
    delete obj.des;
    console.log(obj);
    obj.des = "能不能修改";
    console.log(obj);
</script>
  • 或者你也可以打开控制台查看,都有! 想知道每个的功能可以一一去实验
  • 图解
**Object的静态成员**

Function的构造函数的使用

创建函数的几种方法

  • 函数声明
  • 函数表达式
  • 示例代码 :
<script>
    function func01(){
        //函数体
    }

    var func02 = function name(){};  //命名函数表达式
    var func03 = function (){};      //匿名函数表达式

    var func04 = new Function("console.log(\"1\");");
    func04();
</script>
  • new Function
    1.一个参数都没有,那么创建的是一个空函数
    2.有一个参数,这个参数作为新创建出来的函数的函数体
    3.有多个参数,最后一个参数是新创建的函数的函数体,其它的参数是形参列表
  • 示例代码 :
<script>
    // 操作符 + 拼接字符串的方式
    var func = new Function("console.log(\"让我掉下眼泪的,不是昨夜的酒\");" +
            "  console.log(\"让我依依不舍的,不止你的温柔\");" +
            "console.log(\"余路还要走多久,我牵着你的手\");");
    func();
</script>
  • 示例代码 : ---> 改进
<script type="text/template" id="demo">
    // 使用js模板来存放数据
    console.log("让我掉下眼泪的,不是昨夜的酒");
    console.log("让我依依不舍的,不止你的温柔");
    console.log("余路还要走多久,我牵着你的手");
</script>
<script>
    var func = new Function(`
            // 反括号``
            console.log(\"让我掉下眼泪的,不是昨夜的酒\");
            console.log(\"让我依依不舍的,不止你的温柔\");
            console.log(\"余路还要走多久,我牵着你的手\");`);
    func();
</script>
<script>
    var script = document.getElementById("demo");
    var str = script.innerHTML;
    var func = new Function(str);
    func();
</script>

**更多内容 ---> 点击跳转 **

相关文章

  • javascript原型链及继承的理解

    javascript:void(null)# 原型链及继承的理解 定义函数 继承 继承构造函数 继承静态属性 继承原型链

  • JavaScript的六种继承方式

    JavaScript的几种继承方式 原型链继承 借助构造函数继承(经典继承) 组合继承:原型链 + 借用构造函数(...

  • JavaScript高级程序设计学习笔记之继承模式

    原型链 JavaScript的继承主要依靠原型链来实现的。我们知道,构造函数,原型,和实例之间的关系:每个构造函数...

  • es5的部分继承以及es6的class

    一、JavaScript常用的原型继承方式 原型链继承 2,构造函数继承(对象冒充继承) 3,组合继承(原型链继承...

  • JavaScript 复习——原型链

    JavaScript 原型链中的主要知识概念:原型,构造函数,实例,proto,prototype,instanc...

  • JavaScript 原型链(一)

    JavaScript 原型链中的主要知识概念:原型,构造函数,实例,proto,prototype,instanc...

  • 小白对前端诸问题的认识

    javascript中的原型、原型链继承 原型(原型对象)是每function一个函数时,其prototype属性...

  • JavaScript 常用继承方式

    JavaScript 常用继承方式 原型链继承构造函数,原型,实例之间的关系:每个构造函数之间都有一个原型对象,原...

  • JavaScript继承方式详解

    JavaScript实现继承的方式主要有两种: 原型链继承和借助构造函数继承 一、原型链继承 原型链继承的主要思想...

  • 2018-11-22

    JavaScript的面向对象是基于constructor(构造函数)与prototype(原型链)的。 构造函数...

网友评论

    本文标题:JavaScript - 函数 - 原型链

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