JavaScript原型、函数伪装(apply,call)、继承

简介: <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>原型与继承</title>    <script type="text/javascript">        /*         * 组合的方



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原型与继承</title>
    <script type="text/javascript">
        /*
         * 组合的方式是属性通过伪造的方式实现,方法通过原型链的方式实现,注意内存模型
         *
         *
         * */
        function Parent(name) {
            this.name = name;
            this.color = ["red", "blue"];

        }

        Parent.prototype.ps = function () {

            alert(this.name + "[" + this.color + "]");
        }

        function Child(name, age) {
            this.age = age;
            Parent.call(this, name);


        }

        Child.prototype = new Parent();
        Child.prototype.say = function () {
            alert(this.name + "," + this.age + "[" + this.color + "]");
        }

        var c1 = new Child("Leon", 22);
        c1.color.push("green");
        c1.say();
        c1.ps();
        var c2 = new Child("Ada", 23);
        c2.say();
    </script>
</head>
<body>

</body>
</html>


通过原型的方式创建对象:

/*
*使用基于原型的方式创建可以将属性和方法设置为Person专有的,不能通过windows来调用
*
* */

function Person(){

}

Person.prototype.name="Leon";
Person.prototype.age=23;
Person.prototype.say=function(){

   alert(this.name+","+this.age);
}
var p1=new Person();
p1.say();
say();
//以下方法可以检测出p1 是否有_prop_隐藏属性指向Person的原型
alert(Person.prototype.isPrototypeOf(p1));


wKiom1Z-RbiCHRZ6AACUKytDQ5E079.png

参考视频:原型内存模型

http://tianxingzhe.blog.51cto.com/3390077/1728556


本文出自 “点滴积累” 博客,请务必保留此出处http://tianxingzhe.blog.51cto.com/3390077/1728556

目录
相关文章
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
7月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
328 19
|
9月前
|
JavaScript
JS实现多条件搜索函数
JS封装的多条件搜索
|
11月前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
261 32
|
JavaScript 前端开发 开发者
js实现继承怎么实现
【10月更文挑战第26天】每种方式都有其优缺点和适用场景,开发者可以根据具体的需求和项目情况选择合适的继承方式来实现代码的复用和扩展。
242 61
|
10月前
|
JavaScript 前端开发 Java
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
柯里化是一种强大的函数式编程技术,它通过将函数分解为单参数形式,实现了灵活性与可复用性的统一。无论是参数复用、延迟执行,还是函数组合,柯里化都为现代编程提供了极大的便利。 从 Redux 的选择器优化到复杂的数据流处理,再到深度嵌套的函数优化,柯里化在实际开发中展现出了非凡的价值。如果你希望编写更简洁、更优雅的代码,柯里化无疑是一个值得深入学习和实践的工具。从简单的实现到复杂的应用,希望这篇博客能为你揭开柯里化的奥秘,助力你的开发之旅! 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
258 1
JavaScript中的原型 保姆级文章一文搞懂
|
JavaScript 前端开发
Javascript如何实现继承?
【10月更文挑战第24天】JavaScript 中实现继承的方式有很多种,每种方式都有其优缺点和适用场景。在实际开发中,我们需要根据具体的需求和情况选择合适的继承方式,以实现代码的复用和扩展。
142 11
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
258 1
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。