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

目录
相关文章
|
1月前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
26天前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
25 1
JavaScript中的原型 保姆级文章一文搞懂
|
1月前
|
JavaScript 前端开发 Java
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。
42 2
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
|
26天前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
25 1
|
1月前
|
JavaScript 前端开发
Javascript如何实现继承?
【10月更文挑战第24天】JavaScript 中实现继承的方式有很多种,每种方式都有其优缺点和适用场景。在实际开发中,我们需要根据具体的需求和情况选择合适的继承方式,以实现代码的复用和扩展。
|
1月前
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
1月前
|
JavaScript 前端开发
如何使用原型链继承实现 JavaScript 继承?
【10月更文挑战第22天】使用原型链继承可以实现JavaScript中的继承关系,但需要注意其共享性、查找效率以及参数传递等问题,根据具体的应用场景合理地选择和使用继承方式,以满足代码的复用性和可维护性要求。
|
1月前
|
JavaScript 前端开发 开发者
js实现继承怎么实现
【10月更文挑战第26天】每种方式都有其优缺点和适用场景,开发者可以根据具体的需求和项目情况选择合适的继承方式来实现代码的复用和扩展。
31 1
|
2月前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
2月前
|
JavaScript 前端开发
JS高级—call(),apply(),bind()
【10月更文挑战第17天】call()`、`apply()`和`bind()`是 JavaScript 中非常重要的工具,它们为我们提供了灵活控制函数执行和`this`指向的能力。通过合理运用这些方法,可以实现更复杂的编程逻辑和功能,提升代码的质量和可维护性。你在实际开发中可以根据具体需求,选择合适的方法来满足业务需求,并不断探索它们的更多应用场景。
14 1