zoukankan      html  css  js  c++  java
  • 原型与原型链

    面向对象的两个基本概念

    1. : 是对象的类型模板 , 是一种抽象 , 并不表示实体
    2. 实例 : 是根据类创建的对象 , 表示某个具体的事物

    类和实例是大多数面向对象编程语言的基本概念。

    不过,在JavaScript中,这个概念需要改一改。JavaScript不区分类和实例的概念,而是通过原型(prototype)来实现面向对象编程。

    既然没有类的概念 , 我们就需要用某个对象来模拟一个类了

    var person = {
    	name : "Unnamed",
    	run : function(){
    		console.log(this.name + "is running...");
    	}
    };
    //现在我们可以把person来当做一个原型对象, 来创建一个具体的"人"
    var xiaoming = {
    	name : "小明"
    };
    xiaoming.__proto__ = person;
    

    JavaScript当中的原型链 , 既可以模拟由类创建实例的关系
    也可以模拟继承的关系
    原型对象本身也可以有原型对象 , 从而构成原型链
    默认原型对象是Object
    当然在运行中也可以随时改变某个对象的原型对象

    以上代码主要用于表示原型链的实际关系 , 实际编程当中最好不要直接去修改对象的__proto__
    Object.create()方法可以传入一个原型对象 , 用来构造出一个新对象

    var xiaoming = Object.create(person);
    xiaoming.name = "小明";
    //验证原型对象
    xiaoming.__proto__ === person; //true
    

    当我们访问某个对象的属性时 , 例如obj.xxx
    js引擎会先在该对象上查找该属性 , 如果没找到 , 就会到原型对象上去找 , 也就是顺着原型链一直向上回溯 , 直到Object.prototype对象 , 如果还没有 , 那么就是undefined

    除此之外 , 也可以使用构造函数来创建对象
    构造函数本身和普通的函数没什么区别 , 只是用new关键字来调用 , 就会返回一个需要构建的对象

    function Student(){
    	this.name = "sookie";
    	this.age = 18;
    	this.say = function(){
    		alert("Hello");
    	}
    }
    var stu = new Student();
    stu.say();
    

    如果按照普通函数的调用方式执行调用 , 其中的this就表示window对象
    那么其中代码的效果就是定义了几个全局属性
    如果使用 new 来调用该函数 , 那么它绑定的this就指向新创建的对象
    并默认返回this ( 不需要写return )

    使用这种方式创建的对象还从原型上获得了一个 constructor 属性
    指向这个构造函数本身

    —> 另外这个对象中有一个 say 属性 , 它是一个函数
    在这种情况下 , 这个函数是属于stu对象的 , 并不属于该对象的原型
    如果使用原型创建了多个对象 , 其中就会有很多重复的函数
    所以可以把这个函数放入到Student的prototype当中

    function Student(){
    	this.name = "sookie";
    	this.age = 18;
    }
    Student.prototype.say = function(){
    	alert("Hello");
    }
    var stu1 = new Student();
    var stu2 = new Student();
    console.log(stu1.say == stu2.say)
    //true
    

  • 相关阅读:
    [笔记]JavaScript 秘密花园
    jQuery效果之jQuery Color animation 色彩动画扩展
    【vue】常见开发知识点与问题整理(持续更新)
    JS ES6中的箭头函数(Arrow Functions)使用
    JS之console.log详解以及兄弟姐们邻居方法扩展
    字符编码ASCII、Unicode 、UTF-8 及实例汉字与Unicode码的相互转化
    JS之表单提交时编码类型enctype详解
    JS之onunload、onbeforeunload事件详解
    《从零开始学习jQuery》:用jQuery操作元素的属性与样式
    vue+vuecli+webpack中使用mockjs模拟后端数据
  • 原文地址:https://www.cnblogs.com/programInit/p/6798240.html
Copyright © 2011-2022 走看看