JS高级（原型）

最新推荐文章于 2024-05-24 13:39:19 发布
最新推荐文章于 2024-05-24 13:39:19 发布
阅读量71 收藏
点赞数
文章标签： javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73758209/article/details/129014957
版权

构造函数的问题

使用构造函数带来的最大的好处就是创建对象更方便了，但是其本身也存在一个浪费内存的问题

：

function Person (name, age) {
  this.name = name
  this.age = age
  this.type = 'human'
  this.sayHello = function () {
    console.log('hello ' + this.name)
  }
}

var p1 = new Person('lpz', 18)
var p2 = new Person('Jack', 16)

在该示例中，从表面上好像没什么问题，但是实际上这样做，有一个很大的弊端。 那就是对于每一个实例对象，type 和 sayHello 都是一模一样的内容， 每一次生成一个实例，都必须为重复的内容，多占用一些内存，如果实例对象很多，会造成极大的内存浪费。

console.log(p1.sayHello === p2.sayHello) // => false

对于这种问题我们可以把需要共享的函数定义到构造函数外部：

function sayHello = function () {
  console.log('hello ' + this.name)
}

function Person (name, age) {
  this.name = name
  this.age = age
  this.type = 'human'
  this.sayHello = sayHello
}

var p1 = new Person('lpz', 18)
var p2 = new Person('Jack', 16)

console.log(p1.sayHello === p2.sayHello) // => true

这样确实可以了，但是如果有多个需要共享的函数的话就会造成全局命名空间冲突的问题。

你肯定想到了可以把多个函数放到一个对象中用来避免全局命名空间冲突的问题：

var fns = {
  sayHello: function () {
    console.log('hello ' + this.name)
  },
  sayAge: function () {
    console.log(this.age)
  }
}

function Person (name, age) {
  this.name = name
  this.age = age
  this.type = 'human'
  this.sayHello = fns.sayHello
  this.sayAge = fns.sayAge
}

var p1 = new Person('lpz', 18)
var p2 = new Person('Jack', 16)

console.log(p1.sayHello === p2.sayHello) // => true
console.log(p1.sayAge === p2.sayAge) // => true

更好的解决方法：原型

Javascript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象。 这个对象的所有属性和方法，都会被构造函数的实例继承。

这也就意味着，我们可以把所有对象实例需要共享的属性和方法直接定义在 prototype 对象上。

function Person (name, age) {
  this.name = name
  this.age = age
}

console.log(Person.prototype)

Person.prototype.type = 'human'

Person.prototype.sayName = function () {
  console.log(this.name)
}

var p1 = new Person('lpz', 18)
var p2 = new Person('Jack', 16)

console.log(p1.sayName === p2.sayName) // => true

构造函数、实例、原型三者之间的关系

 任何函数都具有一个 prototype 属性，该属性是一个对象。

构造函数的 prototype 对象默认都有一个 constructor 属性，指向 prototype 对象所在函数。

console.log(F.constructor === F) // => true

通过构造函数得到的实例对象内部会包含一个指向构造函数的 prototype 对象的指针 __proto__。

var instance = new F()
console.log(instance.__proto__ === F.prototype) // => true

总结：

也就是说，在我们调用 person1.sayName() 的时候，会先后执行两次搜索：

而这正是多个对象实例共享原型所保存的属性和方法的基本原理。

总结：

实例对象读写原型对象成员

读取：

值类型成员写入（实例对象.值类型成员 = xx）：

引用类型成员写入（实例对象.引用类型成员 = xx）：

复杂类型修改（实例对象.成员.xx = xx）：

更简单的原型语法

我们注意到，前面例子中每添加一个属性和方法就要敲一遍 Person.prototype 。 为减少不必要的输入，更常见的做法是用一个包含所有属性和方法的对象字面量来重写整个原型对象：

  • 任何函数都具有一个 prototype 属性，该属性是一个对象

  • 构造函数的 prototype 对象默认都有一个 constructor 属性，指向 prototype 对象所在函数

  • 通过构造函数得到的实例对象内部会包含一个指向构造函数的 prototype 对象的指针 __proto__

  • 所有实例都直接或间接继承了原型对象的成员

  • 属性成员的搜索原则：原型链

    了解了 构造函数-实例-原型对象 三者之间的关系后，接下来我们来解释一下为什么实例对象可以访问原型对象中的成员。

    每当代码读取某个对象的某个属性时，都会执行一次搜索，目标是具有给定名字的属性

  • 搜索首先从对象实例本身开始

  • 如果在实例中找到了具有给定名字的属性，则返回该属性的值

  • 如果没有找到，则继续搜索指针指向的原型对象，在原型对象中查找具有给定名字的属性

  • 如果在原型对象中找到了这个属性，则返回该属性的值

  • 首先，解析器会问：“实例 person1 有 sayName 属性吗？”答：“没有。

  • ”然后，它继续搜索，再问：“ person1 的原型有 sayName 属性吗？”答：“有。

  • ”于是，它就读取那个保存在原型对象中的函数。

  • 当我们调用 person2.sayName() 时，将会重现相同的搜索过程，得到相同的结果。

  • 先在自己身上找，找到即返回

  • 自己身上找不到，则沿着原型链向上查找，找到即返回

  • 如果一直到原型链的末端还没有找到，则返回 undefined

  • 先在自己身上找，找到即返回

  • 当实例期望重写原型对象中的某个普通数据成员时实际上会把该成员添加到自己身上

  • 也就是说该行为实际上会屏蔽掉对原型对象成员的访问

  • 同上

  • 同样会先在自己身上找该成员，如果自己身上找到则直接修改

  • 如果自己身上找不到，则沿着原型链继续查找，如果找到则修改

  • 如果一直到原型链的末端还没有找到该成员，则报错（实例对象.undefined.xx = xx）

 

更简单的原型语法

我们注意到，前面例子中每添加一个属性和方法就要敲一遍 Person.prototype 。 为减少不必要的输入，更常见的做法是用一个包含所有属性和方法的对象字面量来重写整个原型对象：

function Person (name, age) {
  this.name = name
  this.age = age
}

Person.prototype = {
  type: 'human',
  sayHello: function () {
    console.log('我叫' + this.name + '，我今年' + this.age + '岁了')
  }
}

在该示例中，我们将 Person.prototype 重置到了一个新的对象。 这样做的好处就是为 Person.prototype 添加成员简单了，但是也会带来一个问题，那就是原型对象丢失了 constructor 成员。

所以，我们为了保持 constructor 的指向正确，建议的写法是：

function Person (name, age) {
  this.name = name
  this.age = age
}

Person.prototype = {
  constructor: Person, // => 手动将 constructor 指向正确的构造函数
  type: 'human',
  sayHello: function () {
    console.log('我叫' + this.name + '，我今年' + this.age + '岁了')
  }
}

原生对象的原型

​所有函数都有 prototype 属性对象

案例：随机方块

1.创建一个页面，在页面中设置一个层，产生的方块都是在这个层中

<style>
    .map {
      width: 800px;
      height: 600px;
      background-color: #CCC;
      position: relative;
    }
  </style>

2.创建common.js文件

//foreach的兼容代码
if (!Array.prototype.forEach) {

    Array.prototype.forEach = function(callback, thisArg) {

        var T, k;

        if (this == null) {
            throw new TypeError(' this is null or not defined');
        }

        // 1. Let O be the result of calling toObject() passing the
        // |this| value as the argument.
        var O = Object(this);

        // 2. Let lenValue be the result of calling the Get() internal
        // method of O with the argument "length".
        // 3. Let len be toUint32(lenValue).
        var len = O.length >>> 0;

        // 4. If isCallable(callback) is false, throw a TypeError exception. 
        // See: http://es5.github.com/#x9.11
        if (typeof callback !== "function") {
            throw new TypeError(callback + ' is not a function');
        }

        // 5. If thisArg was supplied, let T be thisArg; else let
        // T be undefined.
        if (arguments.length > 1) {
            T = thisArg;
        }

        // 6. Let k be 0
        k = 0;

        // 7. Repeat, while k < len
        while (k < len) {

            var kValue;

            // a. Let Pk be ToString(k).
            //    This is implicit for LHS operands of the in operator
            // b. Let kPresent be the result of calling the HasProperty
            //    internal method of O with argument Pk.
            //    This step can be combined with c
            // c. If kPresent is true, then
            if (k in O) {

                // i. Let kValue be the result of calling the Get internal
                // method of O with argument Pk.
                kValue = O[k];

                // ii. Call the Call internal method of callback with T as
                // the this value and argument list containing kValue, k, and O.
                callback.call(T, kValue, k, O);
            }
            // d. Increase k by 1.
            k++;
        }
        // 8. return undefined
    };
}


//格式化日期的代码

//根据id获取元素的代码

//innerText和textContent的兼容

//获取第一个子元素的兼容

//获取最后一个子元素的兼容



/**
 * 格式化日期
 * @param dt 日期对象
 * @returns {string} 返回值是格式化的字符串日期
 */
function getDates(dt) {
    var str = "";//存储时间的字符串
    //获取年
    var year = dt.getFullYear();
    //获取月
    var month = dt.getMonth() + 1;
    //获取日
    var day = dt.getDate();
    //获取小时
    var hour = dt.getHours();
    //获取分钟
    var min = dt.getMinutes();
    //获取秒
    var sec = dt.getSeconds();
    month = month < 10 ? "0" + month : month;
    day = day < 10 ? "0" + day : day;
    hour = hour < 10 ? "0" + hour : hour;
    min = min < 10 ? "0" + min : min;
    sec = sec < 10 ? "0" + sec : sec;
    str = year + "年" + month + "月" + day + "日 " + hour + ":" + min + ":" + sec;
    return str;
}
/**
 * 获取指定标签对象
 * @param id 标签的id属性值
 * @returns {Element}根据id属性值返回指定标签对象
 */
function my$(id) {
    return document.getElementById(id);
}
/**
 * 设置元素的文本内容
 * @param element 任意元素
 * @param text 任意文本内容
 */
function setInnerText(element, text) {
    if (typeof(element.textContent) == "undefined") {
        element.innerText = text;
    } else {
        element.textContent = text;
    }
}
/**
 * 获取元素的文本内容
 * @param element 任意元素
 * @returns {*} 任意元素中的文本内容
 */
function getInnerText(element) {
    if (typeof(element.textContent) == "undefined") {
        return element.innerText;
    } else {
        return element.textContent;
    }
}
/**
 * 获取父级元素中的第一个子元素
 * @param element 父级元素
 * @returns {*} 父级元素中的子级元素
 */
function getFirstElement(element) {
    if (element.firstElementChild) {
        return element.firstElementChild;
    } else {
        var node = element.firstChild;
        while (node && node.nodeType != 1) {
            node = node.nextSibling;
        }
        return node;
    }
}
/**
 * 获取父级元素中的最后一个子元素
 * @param element 父级元素
 * @returns {*} 最后一个子元素
 */
function getLastElement(element) {
    if (element.lastElementChild) {
        return element.lastElementChild;
    } else {
        var node = element.lastChild;
        while (node && node.nodeType != 1) {
            node = node.previousSibling;
        }
        return node;
    }
}
/**
 * 获取某个元素的前一个兄弟元素
 * @param element 某个元素
 * @returns {*} 前一个兄弟元素
 */
function getPreviousElement(element) {
    if (element.previousElementSibling) {
        return element.previousElementSibling
    } else {
        var node = element.previousSibling;
        while (node && node.nodeType != 1) {
            node = node.previousSibling;
        }
        return node;
    }
}
/**
 * 获取某个元素的后一个兄弟元素
 * @param element 某个元素
 * @returns {*} 后一个兄弟元素
 */
function getNextElement(element) {
    if (element.nextElementSibling) {
        return element.nextElementSibling
    } else {
        var node = element.nextSibling;
        while (node && node.nodeType != 1) {
            node = node.nextSibling;
        }
        return node;
    }
}
/**
 * 获取某个元素的所有兄弟元素
 * @param element 某个元素
 * @returns {Array} 兄弟元素
 */
function getSiblings(element) {
    if (!element)return;
    var elements = [];
    var ele = element.previousSibling;
    while (ele) {
        if (ele.nodeType === 1) {
            elements.push(ele);
        }
        ele = ele.previousSibling;
    }
    ele = element.nextSibling;
    while (ele) {
        if (ele.nodeType === 1) {
            elements.push(ele);

        }
        ele = ele.nextSibling;
    }
    return elements;
}
/**
 * 返回当前浏览器是什么类型的浏览器
 */
function userBrowser(){
    var browserName=navigator.userAgent.toLowerCase();
    if(/msie/i.test(browserName) && !/opera/.test(browserName)){
        console.log("IE");
    }else if(/firefox/i.test(browserName)){
        console.log("Firefox");
    }else if(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)){
        console.log("Chrome");
    }else if(/opera/i.test(browserName)){
        console.log("Opera");
    }else if(/webkit/i.test(browserName) &&!(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))){
        console.log("Safari");
    }else{
        console.log("不知道什么鬼!");
    }
}



//为任意一个元素绑定事件:元素,事件类型,事件处理函数
function addEventListener(element,type,fn) {
    if(element.addEventListener){
        //支持
        element.addEventListener(type,fn,false);
    }else if(element.attachEvent){
        element.attachEvent("on"+type,fn);
    }else{
        element["on"+type]=fn;
    }
}
//为任意的一个元素解绑某个事件:元素,事件类型,事件处理函数
function removeEventListener(element,type,fn) {
    if(element.removeEventListener){
        element.removeEventListener(type,fn,false);
    }else if(element.detachEvent){
        element.detachEvent("on"+type,fn);
    }else{
        element["on"+type]=null;
    }
}

/**
 * 获取的是页面向上或者向左卷曲出去的距离的值,返回的是对象
 * @returns {{top: (Number|number), left: (Number|number)}}
 */
function getScroll() {
    return {
        top: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0,
        left: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft||0
    };
}

3.在页面中引入JS文件

<script src="common.js"></script>

4.实现方块的随机产生位置

<script>
    //产生随机数对象的
    (function (window) {
      function Random() {
      }
      Random.prototype.getRandom = function (min, max) {
        return Math.floor(Math.random() * (max - min) + min);
      };
      //把局部对象暴露给window顶级对象,就成了全局的对象
      window.Random = new Random();
    })(window);//自调用构造函数的方式,分号一定要加上


    //产生小方块对象
    (function (window) {
      //console.log(Random.getRandom(0,5));
      //选择器的方式来获取元素对象
      var map = document.querySelector(".map");

      //食物的构造函数
      function Food(width, height, color) {
        this.width = width || 20;//默认的小方块的宽
        this.height = height || 20;//默认的小方块的高
        //横坐标,纵坐标
        this.x = 0;//横坐标随机产生的
        this.y = 0;//纵坐标随机产生的
        this.color = color;//小方块的背景颜色
        this.element = document.createElement("div");//小方块的元素
      }
      //初始化小方块的显示的效果及位置---显示地图上
      Food.prototype.init = function (map) {
        //设置小方块的样式
        var div = this.element;
        div.style.position = "absolute";//脱离文档流
        div.style.width = this.width + "px";
        div.style.height = this.height + "px";
        div.style.backgroundColor = this.color;
        //把小方块加到map地图中
        map.appendChild(div);
        this.render(map);
      };
      //产生随机位置
      Food.prototype.render = function (map) {
        //随机产生横纵坐标
        var x = Random.getRandom(0, map.offsetWidth / this.width) * this.width;
        var y = Random.getRandom(0, map.offsetHeight / this.height) * this.height;
        this.x = x;
        this.y = y;
        var div = this.element;
        div.style.left = this.x + "px";
        div.style.top = this.y + "px";
      };

      //实例化对象
      var fd = new Food(20, 20, "green");
      fd.init(map);
      console.log(fd.x + "====" + fd.y);

    })(window);
  </script>

Good luck。
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js 原型对象和原型链理解
12-02
最近正在读《Javascript高级程序设计》，书中对原型对象和原型链的描述让我受益匪浅，下面仅用一个对比性的例子来说明。 我们经常会这么写 function Person () { this.name = 'John'; } var person = new ...
JS高级 原型
m0_64355119的博客
04-22 32
身上也有一个属性，叫做。该构造函数创建出来的。
JS高级 原型链
m0_63219422的博客
08-06 96
通过构造函数可以设置对象的公有属性，但实例对象的方法通常是不相同的，但每一次创建对象添加不同的方法就需要不断开辟空间，很浪费内存，所以设置出一个原型对象来存储这些方法：当我们通过实例对象来调用方法时，会先在实例对象中寻找方法名并执行，如果没有，就到实例对象中寻找方法名并执行；那么根据上面的总结，构造函数有prototype属性来指向其原型对象，而每一个对象都有__proto__属性指向其原型对象，那么一定会有一个原型对象：如下图。来指向其构造函数，也就是说，这个原型对象是属于哪一个构造函数的。
js高级原型对象
小膏的博客
09-04 119
说到原型对象，我们想来理解静态成员和实例化成成员。 静态成员：不是通过new关键字来创造的就是静态成员，可以直接调用的就是静态成员。 实例成员就是构造函数内部通过this添加的成员 如下列代码中uname age sing 就是实例 成员,实例成员只能通过实例化的对象来访问。 原型对象： 每一个构造函数系统默认都会绑定一个对象，这个对象就是原型对象。通过构造函数prototpye属性可以访...
JavaScript 高级 原型对象
weixin_65257540的博客
03-18 350
函数和原型 (function & prototype) 每一个函数都有一个属性 prototype，表示 "原型对象" 在 JS 中对象的产生是通过原型对象而来，每一个对象，都有一个原型对象。而原型对象上面也有一个自己的原型对象，一层一层向上找，最终会到达 null 对象和隐式原型 (object & __ proto __) 每一个实例对象都有一个 __ proto __ 属性称为 隐式原型，指向创建该对象的构造函数的 prototype。这个属性本身也是对象。 函数的
JavaScript高级原型链
qq_53361975的博客
11-20 217
所有函数的__proto__都是一样的,因为他都是new自己（Function）产生的===》》》实例对象的隐式原型等于构造函数的显式原型(fn.__proto__==Fn.prototype)实例对象的隐式原型等于构造函数的显式原型(fn.__proto__==Fn.prototype)1.函数的显示原型指向的对象默认是空的Object实例对象（但Object除外）设置对象的属性时：不会查找原型链，如果当前对象没有其属性，直接添加其属性并设置值。(所有函数的隐式原型都指向Function的显式原型)
孔浩js 高级使用demo
10-08
孔浩js 高级使用demo 闭包 原型
JavaScript_高级编程
04-15
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个...
javascript高级编程
03-21
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言
JavaScript高级整理
08-24
谷粒学院学习笔记，内容包括 原型与原型链、执行上下文、执行上下文栈、变量提升、函数提升、作用域、作用域链、闭包、对象的多种创建模式、对象的继承模式、JavaScript事件循环机制等。
openlayers绘制经纬网格，有添加或者移除功能
qq_52959651的博客
05-21 209
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
React Suspense与Concurrent Mode：异步渲染的未来
天涯学馆
05-20 1035
React的Suspense和Concurrent Mode是React 16.8及更高版本引入的概念，旨在提升用户体验和性能，特别是在处理异步数据加载和动画时。它们是React的下一代渲染策略的一部分，目的是实现更流畅的交互和更高效的资源调度。
vue 使用 export default
最新发布
global_coding的博客
05-24 288
vue 使用 export default
使用elementUI的form表单校验时，错误提示位置异常解决方法
xuelong的博客
05-22 154
最近在做项目时遇到一个问题，使用elementUI的Descriptions 描述列表与form表单校验时，遇到校验信息显示的位置不对，效果如图
前端开发攻略---用Vue实现无限滚动的几种方法
nibabaoo的博客
05-22 1019
用vue实现无限滚动
15 VUE学习：插槽slot
sixpp的博客
05-23 2697
如果我们将这个概念拓展一下，可以想象的是，一些组件可能只包括了逻辑而不需要自己渲染内容，视图输出通过作用域插槽全权交给了消费者组件。Vue 组件的插槽机制是受[原生 Web Component `` 元素]的启发而诞生，同时还做了一些功能拓展，这些拓展的功能我们后面会学习到。现在组件可以用在不同的地方渲染各异的内容，但同时还保证都具有相同的样式。插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的。在上面的[渲染作用域]中我们讨论到，插槽的内容无法访问到子组件的状态。
jQuery知识点（二）
shsjssnn的博客
05-21 903
1.获取节点： 通过各种选择器或选择器的组合来获取想要的网页元素。 2.创建节点： 元素节点通过工厂函数$()直接创建，文本节点和属性节点可以随着元素节点创建时一起创建，也可以通过先创建元素节点，再使用操作内容和属性的方法产生。 3.插入节点： append()、prepend(): 是父元素的方法 appendTo()、prependTo(): 是要插入的节点的方法 before()、after(): 是要插入
python爬虫简单介绍
mj256115的博客
05-24 365
Python作为一种流行的编程语言，因其简洁、易学和强大的库支持，成为编写爬虫的首选语言之一。下面是Python爬虫的详细介绍，包括其组成部分、常用库以及基本的爬虫流程。
【MySQL精通之路】AdminAPI-使用
Anakki的博客
05-19 733
本文介绍MySQL SHELL提供的MySQL AdminAPI，使您能够，使用它们创建和，并集成。
js高级原型与原型链练习题
05-30
好的，我可以为您提供一些 JS 高级原型与原型链的练习题，希望对您有所帮助。 1. 创建一个构造函数 Person，它有属性 name 和 age。创建一个对象 john，它的 name 是 "John"，age 是 30。使用 Person 的原型对象...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值