实例对象的属性和原型对象中的属性重名问题神奇的原型链继承继承案例

实例对象的属性和原型对象中的属性重名问题

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script>function Person(age,sex){this.age = age;this.sex = sex;}Person.prototype.sex = "女";var per = new Person(10,"男");console.log(per.sex);// 因为JS是一门动态类型的语言,对象没有什么,只要点了,那么这个对象就有了// 这个东西,没有这个属性,只要对象.属性名字,对象就有这个属性了,但是,该属性// 没有赋值,所以,结果是undefinedconsole.log(per.gdagd);// 实例对象访问这个属性,应该先从实例对象中找,找到了就直接用// 找不到就去原型对象中找,找到了就使用,找不到呢?// 通过实例对象能否改变原型对象中的属性值?不能// 就想改变原型对象中属性的值,怎么办?直接通过原型对象.属性=值;可以改变Person.prototype.sex = "oh my";per.sex = "人";// console.log(per.sex);// console.dir(per);</script>
</head>
<body></body>
</html>

神奇的原型链

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script>// 原型链:实例对象和原型对象之间的关系,通过__proto__来联系</script>
</head>
<body>
<div id="dv"></div>
<script>var divObj = document.getElementById("dv");  console.dir(divObj);// divObj.__proto__---->HTMLDivElement.prototype的__proto__---->HTMLElement// .prototype的__proto__---->Element.prototype的__proto__-->// Node.prototype的__proto__---->EventTarget.prototype的// __proto__---->Object.prototype没有__proto__,所以,Object.prototype中的// __proto__是null
</script></body>
</html>

继承

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script>/*** 面向对象的编程思想:根据需求,分析对象,找到对象有什么特征和行为,通过* 代码的方式来实现需求,要想实现这个需求,就要创建对象,就应该先有构造函数* 然后通过构造函数来创建对象,通过对象调用属性和方法来实现相应的功能及* 需求即可** 首先JS不是一门面向对象的语言,JS是一门基于对象的语言,那么为什么学习js还* 要学习面向对象,因为面向对象的思想适合于人的想法,编程起来会更加的方便,及* 后期的维护....** 面向对象的编程语言中有类(class)的概念(也是一种特殊的数据类型),* 但是JS不是面向对象的语言,所以,JS中没有类(class),但是JS可以模拟面向对象* 的思想编程,JS中会通过构造函数来模拟类的概念(class)** ** 小明,小红 都是人* 共同的特征和行为* 特征---->属性* 行为---->方法** 面向对象的特性:封装,继承,多态** 封装:就是包装* 一个值存储在一个变量中--封装* 一坨重复的代码放在一个函数中--封装* 一系列的属性放在一个对象中--封装* 一些功能类似的函数(方法)放在一个对象中--封装* 好多相类似的对象放在一个js文件中----封装** 继承:首先继承是一种关系,类(class)与类之间的关系,JS中没有类,但是可以通过* 构造函数模拟类,然后通过原型来实现继承* 继承也是为了数据共享,js中的继承也是为了实现数据共享** 原型作用之一:数据共享,节省内存空间* 原型作用之二:为了实现继承** 继承是一种关系:** 父类级别和子类级别的关系** 例子:* ** 多态:一个对象有不同的行为,或者是同一个行为针对不同的对象,产生不同的结果*      要想有多态,就要先有继承,js中可以模拟多态,但是不会去使用,也不会模拟*      */// js中通过原型来实现继承function Person(name,age,sex){this.name = name;this.age = age;this.sex = sex;}Person.prototype.eat = function(){console.log("人可以吃东西");};Person.prototype.sleep = function(){console.log("人在睡觉");};Person.prototype.play = function(){console.log("生活就是不一样的玩法而已");};var per = new Person("小明",10,"男");function Student(score){this.score = score;}// 改变学生的原型的指向即可====>学生和人已经发生关系了Student.prototype = new Person("小明",10,"男");Student.prototype.study = function(){console.log("学习是很累的");};// 相同的代码太多,造成了代码的冗余(重复的代码)var stu = new Student(100);console.log(stu.name);console.log(stu.age);console.log(stu.sex);stu.eat();stu.play();stu.sleep();console.log("下面的是学生对象中自己有的");console.log(stu.score);stu.study();</script>
</head>
<body></body>
</html>

继承案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script>// 动物有名字,有体重,有吃东西的行为// 小狗有名字,有体重,有毛色,有吃东西的行为,还有咬人的行为// 哈士奇名字,有体重,有毛色,性别,有吃东西的行为,还有咬人的行为,逗主人开心// 的行为// 动物的构造函数function Animal(name,weight){this.name = name;this.weight = weight;}// 动物的原型的方法Animal.prototype.eat = function(){console.log("天天吃东西");};// 狗的构造函数function Dog(color){this.color = color;}Dog.prototype = new Animal("哮天犬","50kg");Dog.prototype.bitePerson = function(){console.log("咬死你");};// 哈士奇function ErHa(sex){this.sex = sex;}ErHa.prototype = new Dog("黑白色");ErHa.prototype.playHost = function(){console.log("拆家");};var erHa = new ErHa("雄性");console.log(erHa.name,erHa.weight,erHa.color);erHa.eat();erHa.bitePerson();erHa.playHost();</script>
</head>
<body></body>
</html>

实例对象的属性和原型对象中的属性重名问题神奇的原型链继承继承案例相关推荐

python私有属性怎么定义_Python中私有属性的定义方式
Python没有类似于Java的private关键字, 但也可以为类定义私有属性. 只需将属性命名变为以__开头, 例如 __field. 示例代码: class Vector2D(object): ...
前端小技巧：javascript 获取标签中的属性对指定标签中的属性进行操作
javascript 标签中指定属性值的更改与获取适用于基本标签 <input><i><a>等基本标签引用jQuery,两种方式使用下面的input标签为例子 ...
php js怎么去掉类属性,如何修改DOM中的属性，类和样式
通过jQuery来获取要修改的DOM元素,然后通过JavaScript中方法来对属性.类以及样式进行修改今天在本篇文章中将分享的是如何通过修改html元素节点的样式,类和属性来进一步的更改dom,, ...
html 设置readonly属性,js与html中readonly属性设置对比
说明: readonly属性在html标签里使用不区分大小写. 在js中使用,IE不能识别"readonly",要用"readOnly". 下面对比下IE与FF ...
html5不支持的属性,IE9对HTML5中部分属性不支持的原因分析
这篇文章主要为大家介绍了IE9对HTML5中部分属性不支持的原因分析,对于了解IE9与HTML5的应用有一定帮助作用,需要的朋友可以参考下本文较为详细的分析了IE9对HTML5中部分属性不支持的原因 ...
java 变量重名_关于java中变量的重名问题
在java语言中,变量的命名有很多规则和规范,但是有的地方可以使用相同的变量名,有的地方却不能使用,这是为什么呢? 下面是个人的一点见解,是从作用域和内存来分析的,目的是为了方便理解大家可以看下面这 ...
android id 重名_android 中不同的Xml中id可以重名吗？
今天在做项目的时候,居然发现@+id 居然可以重名,而且情况一:同一个Xml文件中的同名在同一个Xml文件的中若同名了,则前一个有效,而后一个无效,as会报异常.如: android:id=&qu ...
html中offsetleft属性,详解 javascript中offsetleft属性的用法
此属性可以返回当前元素距离某个父辈元素左边缘的距离,当然这个父辈元素也是有讲究的. (1).如果父辈元素中有定位的元素,那么就返回距离当前元素最近的定位元素边缘的距离. (2).如果父辈元素中没有定位 ...
java 遍历类属性_Java 遍历类中的属性
public static void testReflect(Object model) throwsNoSuchMethodException, IllegalAccessException, Il ...

实例对象的属性和原型对象中的属性重名问题神奇的原型链继承继承案例

实例对象的属性和原型对象中的属性重名问题神奇的原型链继承继承案例相关推荐

最新文章

热门文章

实例对象的属性和原型对象中的属性重名问题 神奇的原型链 继承 继承案例

实例对象的属性和原型对象中的属性重名问题 神奇的原型链 继承 继承案例相关推荐

最新文章

热门文章

实例对象的属性和原型对象中的属性重名问题神奇的原型链继承继承案例

实例对象的属性和原型对象中的属性重名问题神奇的原型链继承继承案例相关推荐